javascript - 将标记与 jsx 结合起来

Question

我有一个数组，其中某些元素是表示标记的字符串，如 "<p>Hello there</p>"其他元素是 JSX。我需要渲染一个 div，其中所有这些元素都按照与数组中的索引相对应的正确顺序排列。我需要这样做的原因是因为 JSX 元素是我从原始 HTML 的其余部分解析出来的元素，并添加了功能，例如 onClick .

我知道您可以使用 dangerouslySetInnerHTML 进行标记对于 jsx，你可以像这样插入它:

<div>
  {myArrayOfComponents}
</div>

但是，有没有办法将两者结合起来制作 div由标记和 JSX 组成？

Answer 1

以下内容应该放在 React 类的 render 方法中或者是 React 功能组件。要保持原始数组的顺序，只需使用映射函数，该函数作用于数组的每个元素，创建一个具有相同大小和顺序但具有新映射元素的新数组。对数组中的每个元素进行类型检测，以确定它是字符串(转换为 JSX React 组件)还是已经是 JSX React 组件(不执行任何操作)。最后，在 div 中返回新数组。

var elements = ['<p>Test HTML</p>', <p>Test JSX</p>].map(function(element) {
  if (typeof(element) === 'string') {
    return (<span dangerouslySetInnerHTML={{__html: element}}></span>);
  } else {
    return element;
  }
});
return (
  <div>{elements}</div>
)

只需将第一行中我的数组替换为你的数组即可使用它。

Code Sandbox Example