I solved it after I came across this StackOverflow answer
First make sure that your main.jsx
file (which would import all the components) also exports them:
import React from 'react';
import ReactDOM from 'react-dom';
import ComponentA from './components/A';
import ComponentB from './components/B';
import style from '../stylesheets/main.scss';
// This is how every tutorial shows you how to get started.
// However we want to use it "on-demand"
/* ReactDOM.render(
<ComponentA arg1="hello" arg2="world" />,
document.getElementById('react-container')
);*/
// ... other stuff here
// Do NOT forget to export the desired components!
export {
ComponentA,
ComponentB
};
Then make sure you use output.library
("more" info in the docs) in the webpack.config.js
file:
module.exports = {
entry: {
// 'vendor': ['bootstrap', 'analytics.js'],
'main': './src/scripts/main.jsx'
},
output: {
filename: './dist/scripts/[name].js',
library: ['App', 'components']
// This will expose Window.App.components which will
// include your exported components e.g. ComponentA and ComponentB
}
// other stuff in the config
};
Then in the web2py view (make sure you include the build files e.g. main.js AND the appropriate containers):
<!-- Make sure you include the build files e.g. main.js -->
<!-- Some other view stuff -->
<div id="react-component-a"></div>
<div id="react-component-b"></div>
<script>
// Below is how it would be used.
// The web2py view would output a div with the proper id
// and then output a script tag with the render block.
ReactDOM.render(
React.createElement(App.components.ComponentA, {arg1:"hello", arg2:"world"}),
document.getElementById('react-component-a')
);
ReactDOM.render(
React.createElement(App.components.ComponentB, {arg1:"hello", arg2:"world"}),
document.getElementById('react-component-b')
);
</script>
NOTE: I decided to use the vanilla react in the view instead of the JSX so no additional transpiling has to be done in the browser.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…