Webpack + React：可重用組件未定義

Question

我正在嘗試創建一個React組件DynamicCollection ，我想在同一頁面中多次使用它。

我想要的是來自dynamicCollection.jsx的文件dynamicCollection.js，以及一些使用組件DynamicCollection的文件，如下所示：

• 帶有ReactDOM.render(<DynamicCollection p1=... p2=.../>,document.getElementById(dyna1));
• 帶有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'

然后，在我的角度指令中，我可以訪問如下所示的react組件；

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

通過這種方法，我可以調用作為webpack步驟的一部分生成的React組件，並在有角度的上下文中進行訪問。