如何在状态字符串中渲染 HTML

2020-06-09 08:00:00 · 飞浪

介绍在React中，状态是用于存储各种值（例如字符串、数字、对象、数组或HTML）的对象。在本指南中，您将学习如何使用状态值和各种技术（例如dangerlySetInnerHTML和第

介绍

在 React 中，状态是用于存储各种值（例如字符串、数字、对象、数组或 HTML）的对象。在本指南中，您将学习如何使用状态值和各种技术（例如dangerlySetInnerHTML和第三方库）来呈现 HTML，以解析 HTML 字符串。

使用 dangerouslySetInnerHTML

dangerlySetInnerHTML是innerHTML属性的替代，因此渲染的内容可能容易受到风险。通常，您应该使用受保护的内容，但有时您可能需要渲染一些脱离上下文的内容。dangerouslySetInnerHTML可用于渲染不安全的 HTML 内容。它允许攻击者通过操纵现有脚本进行跨站点脚本攻击。

让我们在状态对象内创建 HTML 内容，如下所示。

      constructor() {
    super();
    this.state = {
      myContent: `<div>
          <table border="3">
            <tr>
              <td>This is first column</td>
              <td>This is second column</td>
            </tr>
            <tr>
              <td>This is first column</td>
              <td>This is second column</td>
            </tr>
            <tr>
              <td>This is first column</td>
              <td>This is second column</td>
            </tr>
          </table>
      </div>`
    };
}
    

在上面的代码片段中，有一个状态值myContent，它具有 table 标签的 HTML 标记。它用于创建 HTML 表格。

您可以使用相同的变量将其从状态值呈现到 JSX 元素，如下所示。

      render() {
    return (
      <div>
        <span>Render HTML using state string value :</span>
        <br />
        <br />
        <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} />
      </div>
    );
}
    

在上面的例子中，dangerouslySetInnerHTML属性用于将内部 HTML 内容设置为特定的<div>元素。

现在，您可以看到表格由状态值形成并呈现到屏幕中，如下所示。

这是如何使用属性dangerouslySetInnerHTML的方法。

请注意，除非您需要显示静态内容，否则不应使用此属性，因为它会吸引跨站点脚本攻击，这对任何 Web 应用程序来说都不是合适的环境。

使用第三方库

您已经学习了一种使用dangerouslySetInnerHTML解析状态值的简单方法。您还可以使用第三方库来获得相同的功能。有多个库可以解析这些值：

html-react-parser
react-html-parser
html-to-react

在本指南中，您将学习使用react-html-parser库进行 HTML 解析。要使用该库，请使用以下npm命令进行安装。

      npm install react-html-parser

安装库后，按照如下所示导入。

      import ReactHtmlParser from "react-html-parser";
    

现在您可以使用该库来呈现我们在上例中使用的相同 HTML 标记。

      constructor() {
    super();
    this.state = {
      myContent: `<div>
          <table border="3">
            <tr>
              <td>This is first column</td>
              <td>This is second column</td>
            </tr>
            <tr>
              <td>This is first column</td>
              <td>This is second column</td>
            </tr>
            <tr>
              <td>This is first column</td>
              <td>This is second column</td>
            </tr>
          </table>
      </div>`
    };
}
    

现在您已经将状态值作为标记内容，下一步是使用该库并解析 HTML。

      render() {
    return (
      <div>
        <span>Render HTML using third party library :</span>
        <br />
        <br />
        <div>{ReactHtmlParser(this.state.myContent)}</div>
      </div>
    );
}
    

在上面的例子中，有一个<div>部分，其中通过使用状态字符串来解析 HTML 标记。

使用的函数是ReactHtmlParser，它接受状态值作为字符串，并在渲染过程中将其转换为 HTML。

因此，一旦执行应用程序，您就可以看到预期的 HTML 已被呈现并给出了所需的输出。

结论

HTML 解析是一项关键任务，它涉及根据各种要求呈现 HTML 内容，例如使用来自状态对象的值。

在本指南中，您学习了两种解析 HTML 的不同方法：1) 使用dangerouslySetInnerHTML ，以及 2) 使用名为react-html-parser 的第三方库。我希望它能帮助您从状态解析 HTML。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在状态字符串中渲染 HTML

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

constructor() { super(); this.state = { myContent: `<div> <table border="3"> <tr> <td>This is first column</td> <td>This is second column</td> </tr> <tr> <td>This is first column</td> <td>This is second column</td> </tr> <tr> <td>This is first column</td> <td>This is second column</td> </tr> </table> </div>` }; }

render() { return ( <div> <span>Render HTML using state string value :</span> <br /> <br /> <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} /> </div> ); }

render() { return ( <div> <span>Render HTML using third party library :</span> <br /> <br /> <div>{ReactHtmlParser(this.state.myContent)}</div> </div> ); }