Question

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

我知道标记你可以使用dangerouslySetInnerHTML而对于jsx你可以像这样插入它：

<div>
  {myArrayOfComponents}
</div>

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

Answer 1

以下内容应该放在React类的render方法中，或者是React功能组件。要维护原始数组的顺序，只需使用一个map函数，该函数作用于数组的每个元素，创建一个大小和顺序相同但新映射元素的新数组。对数组中的每个元素进行类型检测，以确定它是否为字符串（转换为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

将标记与jsx结合使用

1 个答案: