我试图渲染一个内部使用document.write()
的组件,因为我必须将json字符串转换为HTML。我面临的问题是,执行此操作时,组件仅呈现document.write()
内部的内容。
代码如下:
render() {
return (
<div>
<Header />
<div className="main-wrapper">
<Link className="back-home" to="/">
All news
</Link>
{this.state.articles.map(articulo => {
console.log(articulo.content.rendered);
return (
<article className="article-wrapper" key={articulo.id}>
<h1>{document.write(articulo.title.rendered)}</h1>
<span className="article-date">
{this.dameFecha(articulo.date)}
</span>
<img
className="article-image"
src={
articulo.better_featured_image.media_details.sizes.small
.source_url
}
/>
<div className="article-content">
{document.write(articulo.content.rendered)}
</div>
</article>
);
})}
</div>
</div>
);
}
没有一个元素以这种方式显示。我已经尝试将所有元素放入document.write()
中,但是React不允许这样做。我的意思是这样做:
render() {
return (document.write(/* all the code */))
}
有什么办法解决这个问题?
答案 0 :(得分:2)
您可以使用dangerouslySetInnerHTML
来呈现HTML字符串:
<h1 dangerouslySetInnerHTML={{ __html: articulo.title.rendered }} />