包含标签到reactjs元素的字符串

String containing hashtag to reactjs element

本文关键字：字符串 元素 reactjs 标签 包含      更新时间：2023-09-26

大家好，我正在使用咖啡脚本和ReactJS为我的网站。到目前为止，我的开发很顺利，直到我遇到了带有hashtag的String，然后将hashtag转换为react element

元素反应
@HashtagLink = React.createClass
displayName: 'hashtag link' 
  render: ->
    React.DOM.a null,
      href:'/hashtag/' + @props.hashtag
      @props.hashtag
JS函数 
@hashTagToLink = (string) ->
  string.replace(/#('S*)/g,'<a href="http://emilenriquez.com">$1</a>')

示例字符串:I am a string with #hashtag I want to be converted to link

期望输出:我是一个带有#hashtag的字符串，我想转换为链接

电流输出:I am a string with <a href="emilenriquez.com">#hashtag</a> I want to be converted to string

你的@hashTagToLink正在创建一个适合innerHTML的字符串，而不是创建一个React元素。

如果你想让它返回一个react元素，像这样的东西应该可以工作:

@hashTagToLink = (string) ->
  newString = string.split(/#('S*)/g)
  return React.DOM.div(null,
     newString[0],
     React.DOM.a({
        href: 'http://emilenriquez.com'
     }, newString[1]),
     newString[2],
  )

一个替代方案: React组件也有一个dangerouslySetInnerHTML方法，所以如果你做需要返回字符串作为DOM片段。你可以使用:

<div dangerouslySetInnerHTML={ __html: @hashTagToLink() } />
https://facebook.github.io/react/tips/dangerously-set-inner-html.html

相关文章：