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

Question

我希望能够传递带有 HTML 标签的文本，如下所示：

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

但是在 MyComponent 的渲染方法内部，当我打印出 this.props.text 时，它实际上会打印出所有内容：

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

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

原文由 ffxsam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这里有一个小提琴表明它可以工作：http: //jsfiddle.net/7s7dee6L/

此外，作为最后的手段，您始终 可以插入原始 HTML ，但要小心，因为如果不清理属性值，这可能会使您面临跨站点脚本 (XSS) 攻击。

原文由 matagus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实际上，有多种方法可以解决这个问题。

你想在你的道具中使用 JSX

您可以简单地使用 {} 使 JSX 解析参数。唯一的限制与每个 JSX 元素相同：它必须只返回一个根元素。

 myProp={<div><SomeComponent>Some String</div>}

最好的可读方法是创建一个函数 renderMyProp ，它将返回 JSX 组件（就像标准的渲染函数一样），然后简单地调用 myProp={ this.renderMyProp() }

您只想将 HTML 作为字符串传递

默认情况下，JSX 不允许您从字符串值渲染原始 HTML。但是，有一种方法可以做到这一点：

 myProp="<div>This is some html</div>"

然后在你的组件中你可以像这样使用它：

 <div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></div>

请注意，此解决方案“可以”打开跨站点脚本伪造攻击。还要注意你只能呈现简单的 HTML，不能呈现 JSX 标签或组件或其他花哨的东西。

数组方式

在 React 中，您可以传递一个 JSX 元素数组。这意味着：

 myProp={["This is html", <span>Some other</span>, "and again some other"]}

我不推荐这种方法，因为：

• 它将创建一个警告（缺少密钥）
• 不可读
• 这不是真正的 JSX 方式，它更像是一种 hack 而不是预期的设计。

孩子们的方式

为了完整起见添加它，但在反应中，您还可以获得组件“内部”的所有子项。

因此，如果我采用以下代码：

 <SomeComponent>
    <div>Some content</div>
    <div>Some content</div>
</SomeComponent>

然后这两个 div 将作为 this.props.children 在 SomeComponent 中可用，并且可以使用标准的 {} 语法呈现。

当您只有一个 HTML 内容要传递给您的组件时，此解决方案是完美的（想象一个 Popin 组件只将 Popin 的内容作为子组件）。

但是，如果您有多个内容，则不能使用子项（或者您至少需要将其与此处的其他解决方案结合使用）

原文由 Atrakeur 发布，翻译遵循 CC BY-SA 4.0 许可协议