Question

我从HTML随附的API接收了信息。发生的是，当我尝试在代码中显示信息时，它会将HTML转换为字符串，而不会读为真实的HTML。
我进行了很多搜索，发现的只是Fragmant的方法，但是我也看到了一些有关它的评论和评论，如果存在其他解决方案，我也不想使用它。另外，我尝试使用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> );，但没有成功。

下面是我的render（）代码：

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11)
  document.getElementById("IDOfYourElement").style.display="block";

这是一张图片，显示：

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

Answer 2

检查要添加到节点的文本是否没有转义，如下所示：

model: {
  description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
}

代替此：

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

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

2 个答案: