在根元素中反应混合组件和 html

Question

我想在不进行异步调用的情况下将服务器端数据传递给 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 视图中混合 html 和 react 根元素中的 react 组件。

我希望我说清楚了

非常感谢

Answer 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

React mixing components and html inside root element

html

javascript

components

reactjs

react-component