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 root元素中的组件进行反应。

我希望我很清楚

非常感谢您

Answer 1

反应组件不是HTML，因此不能在HTML页面中使用。 JSX语法是React.createComponent(...)的语法糖。尽管React.createComponent(...)可以在<script>中的HTML中使用，但在那里没有多大意义，因为应使用ReactDOM.render用任何方式呈现React组件，以使其有用，并且这种情况会发生在React应用程序内部。

另一个问题是，如果ReactComponentA是在React应用程序中定义的，那么它将不能在全局范围内作为ReactComponentA使用。

如果应用程序充斥了数据以避免异步AJAX调用，则可以使用全局变量提供数据：

<script>
window.__APP_DATA__ = {/* provided in server-side template */};
</script>

并在应用程序内部用作window.__APP_DATA__。

反应根元素内部的混合成分和html

1 个答案: