渲染一个带有document.write()的react.js组件

时间:2018-07-14 14:17:41

标签: javascript reactjs

我试图渲染一个内部使用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 */))
}

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

1 个答案:

答案 0 :(得分:2)

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

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