如何将数据从 html/JavaScript 页面传递到 React 组件

Question

I have a working react application. If I render the component on the bottom of App.js , it works. It bundles everything together.

However, I would like to render the react component in the file that includes bundle.js .

So on the HTML page I have this code:

<script src="Scripts/ParsedRequests/dist/bundle.js"></script>
<script>
  var props = {
    rowData: { make: 'Toyota2', model: 'Celica', price: 35000 }
  };

  console.log(props);

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(Main, props, null));
</script>

The error I am getting is: ReactDOM is not defined

Answer 1

You should add the JS libraries in your HTML file, React and ReactDOM , so you can use the functions in your JS code.

 <div id="root"></div> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script type="text/babel"> var props = { rowData: { make: 'Toyota2', model: 'Celica', price: 35000 } }; function Main(props) { console.log(props); return ( <div> Make: {props.rowData.make}<br />Model: {props.rowData.model}<br />Price: {props.rowData.price} </div> ); } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(React.createElement(Main, props, null)); </script>

You can read more about it on the official doc: https://reactjs.org/docs/add-react-to-a-website.html