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

【问题标题】：String containing hashtag to reactjs element包含标签到 reactjs 元素的字符串
【发布时间】：2016-01-10 21:08:12
【问题描述】：

大家好，我正在为我的网站使用咖啡脚本和 ReactJS。到目前为止，我的开发进展顺利，直到遇到带有 hashtag 的 String，然后将 hash tag 转换为反应元素

反应元素

@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

【问题讨论】：

标签： javascript html regex coffeescript reactjs

【解决方案1】：

您的 @hashTagToLink 正在创建适合 innerHTML 的字符串，而不是创建 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

【讨论】：