Question

大家好我正在为我的网站使用咖啡脚本和ReactJS。到目前为止，我有一个平滑的开发，直到我遇到带有hashtag的String，然后将hash标签转换为react元素

反应元素

@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

Answer 1

您的@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

包含reactjs元素的hashtag的字符串

1 个答案: