在 React.js 中将字符串转换为真实的 HTML

Posted 2023-02-22

【中文标题】在 React.js 中将字符串转换为真实的 HTML

【英文标题】：Convert string to real HTML in React.js

【发布时间】：2019-01-03 05:10:55

【问题描述】：

我从一个带有 html 的 API 收到信息。发生的情况是，当我尝试在代码中显示信息时，它会将 HTML 转换为字符串并且不会读取为真正的 HTML。 我搜索了很多，我看到的只是dangerouslySetInnerHTML 的方法，但我也看到了一些关于它的评论和 cmets，如果存在其他解决方案，我不想使用它。另外，我尝试使用Fragmant，但没有成功。

下面是我的 render() 代码：

return (
  <div>
    models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key=model.id>
          <img
            src="url" + model.image
            className="ParcImage"
            
          />
          <h1>Sofá model.name</h1>
          <h2>
            1,200<span>€</span>
          </h2>

          <p className="Features">model.description</p>

          <button className="Botao">
            <p className="MostraDepois">Ver Detalhes</p>
            <span>+</span>
          </button>
          <img src="../../img/points.svg" className="Decoration"  />
        </div>
      </a>
    ))
  </div>
);

这是一张图片显示：

【问题讨论】：

您能否提供更多信息，例如您如何建模对象的外观或示例屏幕截图？

@MaddEye 我编辑了问题

您找到安全的解决方案了吗？一些线程已经推荐了库，但他们没有提到任何关于安全性的内容。

我使用了 Tholle 谈到的以下解决方案。老实说，Idk 关于安全性@Omar

【参考方案1】：

如果字符串中有 html，可以使用dangerouslySetInnerHTML 将其呈现为 html。

return (
  <div>
    models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key=model.id>
          <img
            src="url" + model.image
            className="ParcImage"
            
          />
          <h1>Sofá model.name</h1>
          <h2>
            1,200<span>€</span>
          </h2>

          <p
            className="Features"
            dangerouslySetInnerHTML= __html: model.description 
          />

          <button className="Botao">
            <p className="MostraDepois">Ver Detalhes</p>
            <span>+</span>
          </button>
          <img src="../../img/points.svg" className="Decoration"  />
        </div>
      </a>
    ))
  </div>
);

【参考方案2】：

检查您尝试附加到节点的文本是否没有像这样转义：

model: 
  description: '<h1>Hi there!</h1>'

而不是这个：

model: 
  description: '<h1>Hi there!</h1>'

如果被转义，你应该从你的服务器端转换它。

如果你不能尝试这样的事情：

<p className="Features">model.description.fromCharCode(183)</p>

另一个选项是 ReactHtmlParser 和 unescapingHtml 的组合：

import ReactHtmlParser from "react-html-parser";

let model = [
  
    description: "<h1>Hello There</h1>"
  ,
  
    description: "&lt;h1&gt;Hello There&lt;/h1&gt;"
  
];

function App() 
  function unescapeHTML(html) 
    var escapeEl = document.createElement("textarea");
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
  

  return (
    <div className="App">
      model.map(des => 
        return ReactHtmlParser(unescapeHTML(des.description));
      )
    </div>
  );

【讨论】：

Thw HTML 来自 API 响应，我该怎么做 model: ？此外，fromCharCode(183) 表示错误it's not a function

这只是您可能的模型 json 的一个视图。我用一个可行的解决方案的可运行示例来编辑答案