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
Post a Comment