React mixing components and html inside root element
Question
I want to pass server side data to React components without making async call. I was wondering about building React app directly from my html page, something like what's written down here.
Is there a way to do something like this inside my 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.
I hope I was clear
Thank you very much
1 answers
solution1
0 2018-11-28 11:40:22
React components aren't HTML and cannot be used in HTML page. JSX syntax is syntactic sugar for 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.
Another problem is that if ReactComponentA is defined inside React application, it wouldn't be available as ReactComponentA in global scope.
If an application is hydrated with data to avoid asynchronous AJAX calls, data can be provided with globals:
<script>
window.__APP_DATA__ = {/* provided in server-side template */};
</script>
And be used inside an application as window.__APP_DATA__ .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.