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

Question

我正在尝试渲染一个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 */))
}

有没有办法解决这个问题？

标签： javascriptreactjs

Answer 1

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

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