webpack包导出中的反应组件库用于运行时渲染 [英] library of react components in webpack bundle export to use in on runtime rendering
问题描述
我正在升级旧版web2py(python)应用程序以使用反应组件。我正在使用webpack来浏览jsx文件以缩小js包。我想要使用:
I am upgrading a legacy web2py (python) application to use react components. I am using webpack to transpile the jsx files to minified js bundle. I want to be able to use:
ReactDOM.render(
<ComponentA arg1="hello" arg2="world" />,
document.getElementById('react-container')
);
其中ComponentA包含在包中,该捆绑包包含在web2py视图中。问题是我无法在视图中访问ComponentA。以下示例将工作:
Where ComponentA is included in the bundle and the bundle is included on the web2py view. The issue is that I can't access ComponentA in the view. The following example will work:
<script>
var ComponentA = React.createClass({
render: function() {
var p = React.createElement('p', null, 'Passed these props: ',this.props.arg1, ' and ', this.props.arg2);
var div = React.createElement('div', { className: 'my-test' }, p);
return div;
}
});
var component = React.createElement(ComponentA, {arg1:"hello", arg2:"world"})
ReactDOM.render(
component,//I would rather use <ComponentA arg1="hello" arg2="world" />,
document.getElementById('react-sample')
);
</script>
我查看了 exports-loader 和 webpack-add-module-exports ,但我还没有得到它的工作。非常感谢任何帮助。
I looked at exports-loader and webpack-add-module-exports but I have not yet gotten it to work. Any help is greatly appreciated.
推荐答案
我遇到了此StackOverflow答案
首先确保您的 main.jsx
文件(将导入所有组件)也会导出它们:
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
};
然后确保使用 output.library
(文档中的更多信息)在 webpack.config.js
file:
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
};
然后在web2py视图中(确保包括构建文件,如main.js和相应的容器):
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>
注意:我决定在视图中使用香草反应,而不是JSX,所以在浏览器中不需要额外的扩展。
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.
这篇关于webpack包导出中的反应组件库用于运行时渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!