Question

老实说，我不认为这是最好的标题，但我不知道如何解释它。

很抱歉。

我正在尝试编写一个分析所有链接的组件（thar不是锚标签）和表情符号，并将其渲染为链接或图像。

对于表情符号，我正在使用这个神奇的组件：https://github.com/banyan/react-emoji

效果很好，但问题在于简单链接......我没有找到像链接那样渲染的方法，而不是链接标记的文本。

这是我的代码：

# @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 and results.length > 0
      for result in results
        link_html = React.createElement('a', {href: result}, result)
        new_text = new_text.replace(result, link_html)
    return @emojify(new_text)

如果我写了：

您好在这里搜索google.com：）

我得到：你好在这里搜索[object Object] :)（而不是:)我有正确的表情符号图片）

问题是：为什么它没有正确显示对象链接？哪里做错了？

感谢您的帮助。

Answer 1

link_html = React.createElement('a', {href: result}, result)
new_text = new_text.replace(result, link_html)

您无法使用String#replace将对象（由React.createElement返回）放入字符串中。这就像说

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

相反，您应该返回ReactElement（使用JSX或React.createElement创建）包含相关文本，但链接位于{{的正确位置1}}。

考虑

的输出

children

是

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

使用React渲染元素

1 个答案: