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

【问题标题】：Global JS variable to pass HTML chunk to React component将 HTML 块传递给 React 组件的全局 JS 变量
【发布时间】：2020-02-22 06:55:47
【问题描述】：

我有一段 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。

然后我尝试像这样使用 dangerouslySetInnerHTML：

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

这会导致错误：

Invariant Violation：对象作为 React 子对象无效（发现：带有键 {__html} 的对象）。如果您打算渲染一组子项，请改用数组。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：