我有一段 HTML，需要在页面加载时发送到 React 组件而不渲染它。由于缓存，我宁愿不使用 AJAX，但如果我无法弄清楚这一点，我可能会恢复使用 AJAX。
在jsp方面，我有这个:
<script>window.banner_data_for_desktop = "...droplet..."</script>
这包含我需要传递的 HTML block
<div id="desktop-top-banner">
<div>
...
</div>
</div>
在 jsx 方面，我尝试过像这样直接渲染:
<div id="top_bar">{window.banner_data_for_desktop}</div>
这会呈现内容，但将 div 标签显示为字符串，而不是输出为 HTML。
然后我尝试使用angerlySetInnerHTML，如下所示:
<div id="top_bar">dangerouslySetInnerHTML={{ __html: window.banner_data_for_desktop }}</div>
这会导致错误:
Invariant Violation: Objects are not valid as a React child (found: object with keys {__html}). If you meant to render a collection of children, use an array instead.
我尝试使用 Stringify、toString 创建一个函数来返回 html，如下所示:
function createMarkup() {
return {__html: window.banner_data_for_desktop};
}
一切都没有任何运气。如果有人建议从全局 JS 对象渲染 HTML，我将不胜感激!
最佳答案
dangerouslySetInnerHtml 应该是标记的属性:
<div dangerouslySetInnerHTML={{__html: "HTML CHUNK"}}></div>
关于javascript - 用于将 HTML block 传递给 React 组件的全局 JS 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58566694/