在根元素内反应混合组件和 html
Posted
技术标签:
【中文标题】在根元素内反应混合组件和 html【英文标题】：React mixing components and html inside root element 【发布时间】：2019-04-30 07:02:33 【问题描述】：我想在不进行异步调用的情况下将服务器端数据传递给 React 组件。 我想知道直接从我的 html 页面构建 React 应用程序，就像这里写的一样。
有没有办法在我的 html 中做这样的事情：
<body>
<div id="root">
<h1>Title</h1>
<ReactComponentA description="Lorem ipsum">
<div>
Test
</div>
...(maybe other react components or html here)
</ReactComponentA>
</div>
</body>换句话说，我正在尝试在我的 html 视图中的 react root 元素中混合 html 和 react 组件。
希望我清楚
非常感谢
【问题讨论】：
你不能在 HTML 中使用 React 组件，因为它们不是 HTML。你的情况是什么？ 我想在不进行异步调用的情况下传递服务器端数据以响应组件 嵌套反应组件是可行的，抱歉没有得到你想要在这里实现的目标 那么这是 XY 问题，应该以另一种方式解决。考虑使用此信息更新问题。从您发布的伪代码中也不清楚它是哪种数据。 【参考方案1】：React 组件不是 HTML，不能在 HTML 页面中使用。 JSX 语法是 React.createComponent(...) 的语法糖。尽管React.createComponent(...) 可以在<script> 内的HTML 中使用，但它在那里没有多大意义，因为React 组件应该以任何方式使用ReactDOM.render 呈现以便有用，而这发生在React 应用程序中。
另一个问题是，如果 ReactComponentA 是在 React 应用程序中定义的，那么它在全局范围内就不能作为 ReactComponentA 使用。
如果应用程序包含数据以避免异步 AJAX 调用，则可以使用全局变量提供数据：
<script>
window.__APP_DATA__ = /* provided in server-side template */;
</script>
并在应用程序中用作window.__APP_DATA__。
【讨论】：
以上是关于在根元素内反应混合组件和 html的主要内容，如果未能解决你的问题，请参考以下文章