反应根元素内部的混合成分和html
[英]React mixing components and html inside root element
问题描述
I want to pass server side data to React components without making async call. 
我想在不进行异步调用的情况下将服务器端数据传递给React组件。 I was wondering about building React app directly from my html page, something like what's written down here. 我想知道直接从我的html页面构建React应用程序的方法，就像这里写的一样。
Is there a way to do something like this inside my html: 有没有办法在我的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>
In other words I'm trying to mix html and react components inside react root element in my html view. 换句话说，我试图在我的html视图中混合html和react组件内的react root元素。
I hope I was clear 我希望我很清楚
Thank you very much 非常感谢你
1 个解决方案
解决方案1
0 2018-11-28 11:40:22
React components aren't HTML and cannot be used in HTML page. React组件不是HTML，因此不能在HTML页面中使用。 JSX syntax is syntactic sugar for React.createComponent(...) . JSX语法是React.createComponent(...)语法糖。 Even though React.createComponent(...) could be used in HTML within <script> , it wouldn't make much sense there because React components should be rendered with ReactDOM.render any way in order to be useful, and this happens inside React application. 即使React.createComponent(...)可以在<script>中的HTML中使用，在那也没有多大意义，因为应使用ReactDOM.render任何方式渲染React组件，以使其有用，并且这种情况发生在内部反应应用程序。
Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope. 另一个问题是，如果在React应用程序中定义了ReactComponentA ，那么它将无法在全局范围内用作ReactComponentA 。
If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals: 如果应用程序充斥着数据以避免异步AJAX调用，则可以使用全局变量提供数据：
<script>
window.__APP_DATA__ = {/* provided in server-side template */};
</script>
And be used inside an application as window.__APP_DATA__ . 并在应用程序内部用作window.__APP_DATA__ 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.