reactjs - Render an Element with React -


honestly don't think best title, i've no idea how explain it.

so sorry it.

i'm trying write component parse links(thar not anchor tag) , emoji , render links or image.

for emoji i'm using amazing component: https://github.com/banyan/react-emoji

it works well, problem simple links...i don't have found way render links, instead of text of link tag.

this code:

# @cjsx react.dom  @linkify = react.createclass   displayname: 'linkify'    mixins: [reactemoji]    componentdidmount: ->      componentwillunmount: ->    render: ->      <div>       {@parselinks(@props.text)}     </div>    parselinks: (text) ->     pattern = /(ht|f)tps?:\/\/[^\"<]*?(?=\s|$|<\/[^a]>)/gi     results = text.match(pattern)     new_text = text     if results , results.length > 0       result in results         link_html = react.createelement('a', {href: result}, result)         new_text = new_text.replace(result, link_html)     return @emojify(new_text) 

and if wrote:

hello search here google.com :)

i get: hello search here [object object] :) (instead of :) i've correct emoji image)

the problem is: why don't show correctly object link ? done wrong ?

thanks help.

link_html = react.createelement('a', {href: result}, result) new_text = new_text.replace(result, link_html) 

you can't use string#replace put object (returned react.createelement) string. it's saying

var text = "one 2 three";  var el = {testing: true};  alert(text.replace("two", el));

instead, should return reactelement (created jsx or react.createelement) contains associated text, link in correct place in children.

consider output of

<span>test <a href="google.com">google.com</a> link</span> 

which is

react.createelement("span", null,   "test ",   react.createelement("a", {href: "google.com"},     "google.com"   ),    " link" ) 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -