如何将字符串传递给反应组件并将其视为 html？答案

【问题标题】：How can I pass a string to a react component and have it treated as html?如何将字符串传递给反应组件并将其视为 html？
【发布时间】：2021-11-02 06:40:38
【问题描述】：

我有一个反应组件，其中传递的属性之一是字符串。但是这个字符串是一个html组件，比如，

            <Example time="4 <sup> th </sup>  September">
                Text
            </Example>

但是，在我收到的组件上，我希望将其呈现为 html 而不是字符串。

<h6 className="..."> {time} </h6>

【问题讨论】：

您能否为此提供更多背景信息？房产是什么样子的？
我想我可能对此有答案，但需要确保它符合您的需求。
您能否尝试为我们提供更多关于您要完成的工作的背景信息。 stackoverflow.com/help/minimal-reproducible-example 你只是想将time 属性渲染到标题元素中吗？
@RyanLe 我以为我做到了，上面提供的示例就像我想要实现的那样。我有一个将日期作为字符串的反应组件，但是我想在我的日期中使用 ^{标记。所以我想弄清楚如何传递一个字符串并将其呈现为一个 html 标签。}
您的<sup> 是否来自某个财产？尝试为您的问题提供更多背景信息。例如您的属性来自哪里，以及整个组件的外观。

标签： javascript html reactjs

【解决方案1】：

基本上你想显示从另一个来源给出的 html（通常作为文本） dangerouslySetInnerHTML 在 DOM 元素下作为一个属性在 react 中，并且是 React 的替代 innerHTML 从 vanilla JavaScript 中知道的

当使用dangerouslySetInnerHTML 属性时，您需要发送一个带有__html 键的对象，如下所示：

<div dangerouslySetInnerHTML={{ __html: 'beware of dangerously Set InnerHTML' }}>

注意这个属性，它不是无缘无故这样调用的，不注意的使用会为你打开跨站点脚本攻击（XSS attack）

感谢@FrancisJohn 在this 线程中的进一步解释：

当你使用 dangerouslySetInnerHTML 时的场景，它会让 React 知道该组件内部的 HTML 不是它关心的东西关于。

因为 React 使用了一个虚拟 DOM，所以当它去比较 diff 针对实际的 DOM，它可以直接绕过检查该节点的子节点，因为它知道 HTML 来自另一个资源。所以有性能提升。

【讨论】：

【解决方案2】：

dangerouslySetInnerHTML

来自文档

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

这里是文档link

【讨论】：