渲染一个带有document.write（）的react.js组件

Question

我试图呈现一个在内部使用document.write()组件，因为我必须将json字符串转换为HTML。 我面临的问题是，执行此操作时，组件仅呈现document.write()内部的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 */))
}

有什么办法解决这个问题？

Answer 1

您可以使用dangerouslySetInnerHTML呈现HTML字符串：

<h1 dangerouslySetInnerHTML={{ __html: articulo.title.rendered }} />