React-如何在道具中传递HTML标签？

Question

我希望能够通过HTML标签传递文本，如下所示：

<MyComponent text="This is <strong>not</strong> working." />

但是在MyComponent的render方法中，当我打印出时this.props.text，它实际上打印出了所有内容：

This is <strong>not</strong> working.

有什么方法可以使React解析HTML并将其正确转储吗？

Answer 1

您可以将混合数组与字符串和JSX元素一起使用（请参阅此处的文档）：

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

这里有一个小提琴显示了它的工作 原理： http

//jsfiddle.net/7s7dee6L/

另外，作为最后的选择，您始终可以插入原始HTML，但是请小心，因为如果不清理属性值，这可能使您容易受到跨站点脚本（XSS）攻击。