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

Question

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

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

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

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

Answer 1

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

Answer 2

对于那些将来看到这篇文章的人，我最终使用react-string-replace将我的内容中react-string-replace为无需使用dangerouslySetInnerHTML SetInnerHTML 即可工作的组件。