Question

我正在尝试创建一个React组件 DynamicCollection ，我想在同一页面中多次使用它。

我想要的是来自dynamicCollection.jsx的文件dynamicCollection.js和几个使用组件DynamicCollection的文件，如下所示：

dyna1.js与ReactDOM.render(<DynamicCollection p1=... p2=.../>,document.getElementById(dyna1));
dyna2.js与ReactDOM.render(<DynamicCollection p1=... p2=.../>,document.getElementById(dyna2));

...

在dynamicCollection.jsx中我得到了这个：

export default class DynamicCollection extends React.Component { ... }

最后在webpack.config.js中：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './build');
var APP_DIR = path.resolve(__dirname, './app');

var config = {
    entry: {
        'DynamicCollection': './app/DynamicCollectionBox.jsx',
        'dyna1': './app/dyna1.js',
        'dyna2': './app/dyna1.js',
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    module : {
        loaders : [
        {
            test: /\.jsx?/,
            loader : 'babel?presets[]=es2015'
        }
      ]
    }
};

module.exports = config;

问题是我在浏览器控制台中收到此错误：

ReferenceError：未定义DynamicCollection

（注意：我在html文件中包含了DynamicCollection.js，dyna1.js和dyna2.js）

你能帮帮忙吗？

提前谢谢！

Answer 1

确定。我找到了答案。我所做的是在webpack输出中引入了以下属性;

library: 'ReactWelcomeComponent',
libraryTarget: 'var'

然后在我的角度指令中，我能够访问如下的反应组件;

var JSXReactComponent = React.createFactory(ReactWelcomeComponent.default);

通过这种方法，我可以调用作为webpack步骤的一部分生成的React组件，并在角度上下文中进行访问。

Webpack + React：未定义可重用组件

1 个答案: