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

Question

我有一段HTML需要在页面加载时发送到React组件，而不是呈现它。由于缓存的原因，我宁愿不使用AJAX，但如果我不能解决这个问题，我可能会回到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形式输出。

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

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

Answer 1

dangerouslySetInnerHtml应该是标记的一个属性：

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