React 组件在 html 脚本标签中未定义

Question

我需要在我的视图（html 文件）中呈现 React 组件。我正在使用 webpack 1 并收到 component undefined 的错误。我尝试使用 window.component，但也没有用。如果我在组件中使用 RenderDOM，一切正常。

我的组件：

export class SmallCart extends BaseComponent {
  ...
  render() {...}
}

Webpack 1 配置：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var BowerWebpackPlugin = require('bower-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: {
        ...
        myComponent: "./wwwroot/js/es6/SmallCart/SmallCart.jsx",
        ...
    },

    output: {
        path: __dirname + "/dist",
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        loaders: [
            {
                test: /\.(png|jpg|gif|ico)$/,
                loader: "file-loader?name=assets/[name]-[hash:6].[ext]"
            }, {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&minetype=application/font-woff&name=assets/[name]-[hash:6" +
                        "].[ext]"
            }, {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader?name=assets/[name]-[hash:6].[ext]"
            }, {
                test: /\.scss$/i,
                loader: ExtractTextPlugin.extract(['css-loader?-autoprefixer!postcss-loader', 'sass'])
            }, {
                test: /\.css$/i,
                loader: ExtractTextPlugin.extract(['css-loader?-autoprefixer!postcss-loader'])
            }, {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    progress: true,
    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.json', '.js']
    },

    externals: {
        jquery: "jQuery",
        react: "React",
        reactDOM: "ReactDOM"
    },

    plugins: [
        new webpack.ProvidePlugin({'window.Nette': 'nette-forms', 'window.jQuery': 'jquery', jQuery: 'jquery', $: 'jquery'}),   

        new webpack
            .optimize
            .CommonsChunkPlugin({
                filename: "commons.js", name: "commons",

            }),

        new ExtractTextPlugin("frontend.css"),               
    ]
}

在我看来，我有这个：

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="/dist/commons.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dist/SmallCart.js" charset="utf-8"></script>
<script type="text/javascript">
    window.data_for_react = {};        
    ReactDOM.render(React.createElement(SmallCart, { dataSource : data_for_react}, document.getElementById('box-to-rendering'))); 
</script>            

但是在渲染方法中是未定义的组件。 怎么了？视图中是否有可能的渲染组件？

感谢您的宝贵时间。

编辑

好的，现在我尝试使用 window.SmallBasket 和 webpack 配置更新到：

  ...
 new webpack
        .optimize
        .CommonsChunkPlugin({
            names: [
                "commons"
            ],
            minChunks: Infinity
        }),
    ...

而且它有效。但是没有window属性我还是解决不了。

Answer 1

试着把你所有的反应代码从你的视图中放在这样的地方：

document.addEventListener('DOMContentLoaded', () => {

//... your ReactDOM.render stuff here

};

您需要等待 DOM 元素加载后才能获取ElementById。