全局JS变量将HTML块传递给React组件

Question

我有一段HTML，需要在页面加载时发送给React组件而不渲染它。由于缓存，我宁愿不使用我们的AJAX，但是如果我不知道这一点，我可能会回复到它。

在jsp方面，我有这个：

<script>window.banner_data_for_desktop = "...droplet..."</script>

这包含我需要传递的HTML块

<div id="desktop-top-banner">
  <div>
    ...
  </div>
</div>

在jsx方面，我尝试过像这样直接渲染：

<div id="top_bar">{window.banner_data_for_desktop}</div>

这将呈现内容，但将div标签显示为字符串，而不显示为HTML。

因此，我然后尝试使用如下的dragonallySetInnerHTML：

<div id="top_bar">dangerouslySetInnerHTML={{ __html: window.banner_data_for_desktop }}</div>

这会导致错误：

  

不变违反：对象作为React子对象无效（找到：具有键{__html}的对象）。如果要渲染子级集合，请改用数组。

我尝试使用Stringify，toString创建一个函数来返回html，如下所示：

function createMarkup() {
  return {__html: window.banner_data_for_desktop};
}

全部没有运气。如果有人建议从全局JS对象呈现HTML，我将不胜感激！

Answer 1

dangerouslySetInnerHtml应该是标记的属性：

<div dangerouslySetInnerHTML={{__html: "HTML CHUNK"}}></div>