[英]Convert string to real HTML in React.js
我从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>
);
这是显示的图像:
如果字符串中包含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>
);
检查您尝试追加到节点的文本是否没有被转义,如下所示:
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: "<h1>Hello There</h1>"
}
];
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.