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

Question

我从一个包含HTML的API收到了信息。但是当我尝试在代码中显示信息时，它会将HTML转换成字符串，而不是真正的HTML。
我搜索了很多资料，看到的都是使用dangerouslySetInnerHTML方法的方法，但我也看到了一些关于它的评论和回复，如果有其他解决方案，我不想使用它。同时，我也尝试使用Fragment但并没有成功。

以下是我的render()代码：

return (
  <div>
    {models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key={model.id}>
          <img
            src={"url" + model.image}
            className="ParcImage"
            alt="sofa"
          />
          <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" alt="points" />
        </div>
      </a>
    ))}
  </div>
);

这里有一张图片，显示如下内容：

- soalrib

---

你能否提供更多信息，比如你的模型对象长什么样子或者一个示例截图？ - MaddEye

@MaddEye 我编辑了这个问题。 - soalrib

你找到了一个安全的解决方案吗？一些线程建议使用库，但它们没有提及安全性。 - Omar

我使用了Tholle提到的以下解决方案。老实说，我不确定安全性如何@Omar - soalrib

Answer 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"
            alt="sofa"
          />
          <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" alt="points" />
        </div>
      </a>
    ))}
  </div>
);

- Tholle

Answer 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>
  );
}

- MaddEye

---

HTML来自API响应，我该如何处理model: {}？另外，fromCharCode(183)报错说“它不是一个函数”。 - soalrib

这只是您可能模型 JSON 的视图。我使用可运行的示例编辑了答案，以提供一个可行的解决方案。 - MaddEye