ReactJS：如何在'react-way'中用新元素替换字符串

Question

这就是我尝试用组件的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"
}
]
}]

Answer 1

试试这个：

首先用Link替换string，然后使用dangerouslySetInnerHTMLrenderstring，它应该可以工作。

检查此示例：

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'/>