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

Question

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

下面是我的 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>
);

这是一张图片：

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