React：渲染一个数组，其中一些元素是常规字符串，其他元素是 <Link> 组件答案

【问题标题】：React: render an array where some elements are regular strings, others are <Link> componentsReact：渲染一个数组，其中一些元素是常规字符串，其他元素是 <Link> 组件
【发布时间】：2021-01-10 09:36:42
【问题描述】：

我有一个 JSON 对象，其属性为 content，它是一个数组。

此数组中的一些元素是常规字符串，其中一些是来自react-router-dom 的<Link/> 组件。例如： ["String1 ", "String2 ", "<Link to='/path'/>path</Link> ", etc]

目前 react 正在渲染文字字符串 <Link to.../> 我想在其中渲染 Link 组件。

正在渲染对象的行是：<Row style={{ cursor: 'text' }}>{content}</Row>

【问题讨论】：

这能回答你的问题吗？ Reactjs convert html string to jsx
查看stackoverflow.com/questions/19266197/…
@mohituprim 我认为它可能会回答它，但我不确定如何实现它，我将我的 <Row 对象更改为 <Row dangerouslySetInnerHTML={{__html: post.content}} style={{ cursor: 'text' }}/> 但它并没有改变渲染的内容。
你可以在沙箱中创建demo吗codesandbox.io/s/ckmrd
您是否有能力实际传递链接组件而不是将其表示为字符串？因为这样做会更好。

标签： javascript reactjs react-router jsx

【解决方案1】：

在您的数组中，您有 React Link 元素用引号封装。任何放在引号中的 JavaScript 都将被视为原始字符串。您尝试做的可能是使用 JSX 渲染 React 组件。只需删除引号（而且在 '/path' 之后似乎还有一个额外的 /）：然后，此 JSX 代码在编译时转换为 JavaScript，并应呈现组件。

【讨论】：

我自己没有把引号放在那里，我实际上是替换旧的字符串内容，用str.split(' ')分割它，然后有条件地替换以'#'开头的元素和@ 987654322@ 组件。

【解决方案2】：

对于以后看到这篇文章的人，我最终使用react-string-replace 将我内容中的字符串替换为无需使用dangerouslySetInnerHTML 即可工作的组件。

【讨论】：