ReactJS：如何以“反应方式”用新元素替换字符串答案

【问题标题】：ReactJS: How do replace a string with new elements in a 'react-way'ReactJS：如何以“反应方式”用新元素替换字符串
【发布时间】：2017-06-23 19:38:50
【问题描述】：

这就是我试图用组件的render()-方法中的元素替换一些字符串的方式。但这失败了，因为我将替换的字符串作为真正的字符串而不是元素。

我必须做什么才能将Link 作为渲染 Link-元素？现在它只是一个字符串输出。

这是正确的“反应”方式吗？

return (
  <List>
    {
      elements.map(e => {
        return (
          <List.Item>
            {
              links ? links.map(link => {
                return e.content.replace(
                  new RegExp(link.label, 'gi'),
                    '<Link to="/' + link.id + '">$&</Link> (<Icon name="external" />)'
                )
              }) : ''
            }
          </List.Item>
        )
      })
    }
  </List>
)

元素

[{
    "_id" : "zQS6pXicvXk7K2rZ4",
    "content" : "This is a sample text to add some links",
    "links" : [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "articles",
            "label" : "Sample"
        },
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "articles",
            "label" : "add"
        },
        {
            "id" : "XpaiZDn5GhkJ9y87P",
            "type" : "articles",
            "label" : "External"
        }
    ]
}]

【问题讨论】：

elements 通常看起来像什么？还有links?
都是对象数组。
我是从你的代码中得到的，但这有助于查看示例数据。
我明白了。需要根据labels将content拆分成一个字符串数组，如["This is a", "sample", "text to", "add", "some links"]，然后将数组元素替换为<Link />s。

标签： javascript reactjs

【解决方案1】：

试试这个：

首先将string 替换为Link，然后将render 替换为string 使用dangerouslySetInnerHTML，它应该可以工作。

检查这个例子：

let data = [{
    "_id" : "zQS6pXicvXk7K2rZ4",
    "content" : "This is a sample text to add some links",
    "links" : [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "articles",
            "label" : "sample"
        },
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "articles",
            "label" : "add"
        },
        {
            "id" : "XpaiZDn5GhkJ9y87P",
            "type" : "articles",
            "label" : "External"
        }
    ]
}];


var App = () => {
return (
  <div>
    {
      data.map(e => {
        return (
          <div>
            {
              e.links ? e.links.map(link => {
                return <div dangerouslySetInnerHTML={{ __html: e.content.replace(new RegExp(link.label, 'g'),
                    '<a href="/' + link.id + '">$&</a> (<Icon name="external" />)'
                )}} ></div>
              }) : ''
            }
          </div>
        )
      })
    }
  </div>
)
}
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

【讨论】：

但是现在你使用的是<a>，而不是<Link>。
@ChrisG 这是一个如何编写的示例，Link 在这里不起作用，所以我使用了a 标签，它工作正常。同样的代码也适用于Link，因为Link 最终只呈现为a 标记（只是a 标记的包装器）:)
问题是，Link不会被渲染为<a>。这首先是整个问题：如何用 React 元素替换字符串的一部分，而不仅仅是文本。只有将字符串拆分为数组，并将<Link />s 作为元素插入时，它才会按预期工作。您的回答没有解决实际问题。