小编典典

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

reactjs

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

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

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

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

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


阅读 253

收藏
2020-07-22

共1个答案

小编典典

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

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />
这里有一个小提琴显示了它的工作原理http
//jsfiddle.net/7s7dee6L/

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

2020-07-22