webpack 包导出中的 react 组件库，用于运行时渲染

IT技术 python reactjs ecmascript-6 webpack web2py
2021-03-28 06:54:21

我正在升级旧的 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和webpack-add-module-exports，但我还没有让它工作。任何帮助是极大的赞赏。

1个回答

我在遇到这个 StackOverflow 答案后解决了它

首先确保您的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
};

然后确保在文件中使用output.library （文档中的“更多”信息）webpack.config.js：

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，因此不必在浏览器中进行额外的转换。

其它你可能感兴趣的问题
上一篇这个 ES6 箭头函数和普通函数的区别？ 下一篇如何从带有图像的 React.js 发送多部分/表单数据？