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

Posted 2023-02-22

【中文标题】如何将字符串传递给反应组件并将其视为 html？

【英文标题】：How can I pass a string to a react component and have it treated as html?

【发布时间】：2021-11-02 06:40:38

【问题描述】：

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

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

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

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

【问题讨论】：

您能否为此提供更多背景信息？房产是什么样子的？

我想我可能对此有答案，但需要确保它符合您的需求。

您能否尝试为我们提供更多关于您要完成的工作的背景信息。 ***.com/help/minimal-reproducible-example 你只是想将time 属性渲染到标题元素中吗？

@RyanLe 我以为我做到了，上面提供的示例就像我想要实现的那样。我有一个将日期作为字符串的反应组件，但是我想在我的日期中使用 ^{标记。所以我想弄清楚如何传递一个字符串并将其呈现为一个 html 标签。}

您的<sup> 是否来自某个财产？尝试为您的问题提供更多背景信息。例如您的属性来自哪里，以及整个组件的外观。

【参考方案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 · Second';


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

这里是文档link