webpack bundle export 中的 React 组件库,用于运行时渲染
library of react components in webpack bundle export to use in on runtime rendering
我正在升级旧版 web2py (python) 应用程序以使用 React 组件。我正在使用 webpack 将 jsx 文件转换为缩小的 js 包。我希望能够使用:
ReactDOM.render(
<ComponentA arg1="hello" arg2="world" />,
document.getElementById('react-container')
);
其中 ComponentA 包含在包中,包包含在 web2py 视图中。问题是我无法在视图中访问 ComponentA。以下示例将起作用:
<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 and webpack-add-module-exports 但我还没有让它工作。非常感谢任何帮助。
遇到后解决了
首先确保您的 main.jsx
文件(将导入所有组件)也导出它们:
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
};
然后确保在 webpack.config.js
文件中使用 output.library
("more" info in the docs):
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 和适当的容器):
<!-- 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>
注意:我决定在视图中使用 vanilla react 而不是 JSX,因此无需在浏览器中进行额外的转换。
我正在升级旧版 web2py (python) 应用程序以使用 React 组件。我正在使用 webpack 将 jsx 文件转换为缩小的 js 包。我希望能够使用:
ReactDOM.render(
<ComponentA arg1="hello" arg2="world" />,
document.getElementById('react-container')
);
其中 ComponentA 包含在包中,包包含在 web2py 视图中。问题是我无法在视图中访问 ComponentA。以下示例将起作用:
<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 and webpack-add-module-exports 但我还没有让它工作。非常感谢任何帮助。
遇到后解决了
首先确保您的 main.jsx
文件(将导入所有组件)也导出它们:
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
};
然后确保在 webpack.config.js
文件中使用 output.library
("more" info in the docs):
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 和适当的容器):
<!-- 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>
注意:我决定在视图中使用 vanilla react 而不是 JSX,因此无需在浏览器中进行额外的转换。