Question

我正处于将非jsx React项目迁移到JSX的早期阶段，并努力使其工作。

我设法在从index.jsx文件创建时创建一个简单的JSX组件，但我正在尝试与现有代码集成，我想首先将'遗留'React类与我的新JSX课程。

我的Dropdown.jsx代码如下所示：

class Dropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        value: null,
    };
}

render() {
    return <div>
        <select name="carlist" form="carform">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
    </div>;
    }
}

export default Dropdown;

我正在尝试实例化React组件的html文件如下（这是我的大部分遗留代码看起来的样子）

<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

<script src="dist/react-bundle.js"></script>

<script type="application/javascript">

    ReactDOM.render(
      React.createElement(Dropdown, {}, null), 
      document.getElementById('app')
    );

</script>

</body>
</html>`

我的webpack.config.js文件如下：

var path = require('path') ;

module.exports = {
entry: {
    react: [ './src/Dropdown.jsx' ]
},
output: {
    library: "Dropdown",
    libraryTarget: "umd",
    path: path.join( __dirname, 'dist' ),
    filename: '[name]-bundle.js'
},
devtool: 'source-map',
module: {
    loaders:
        [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: [
                    'babel-loader'
                ]
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loaders: [
                    'babel-loader'
                ]
            }

        ]
}
};

我已经做了一些研究试图解决这个问题，最后一个是在配置文件中添加'library'和'libraryTarget'设置。

脚本SEEMS要识别Dropdown类（即，它没有失败，类找不到类型错误）但是我得到了以下内容：

Warning: React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components).

我知道这个类在从index.jsx文件实例化时可以正常工作

import React from 'react';
import ReactDOM from 'react-dom';

import Dropdown from './Dropdown';

ReactDOM.render(
<Dropdown />,
document.getElementById('app')
);

export default Dropdown ;

我是否以错误的方式接近此迁移？ - 我原以为我可以将旧的React代码与JSX输出混合搭配......？

非常感谢提前

Answer 1

Webpack的一点是，你创建的类是从外部世界中正确封装的。你得到的错误

Warning: React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components).

当React无法在任何地方找到类声明时，

是一个错误。虽然我建议你按照正确的方式并在index.jsx文件中实例化它，你仍然可以通过Dropdown.jsx中的这个黑客来完成这项工作

window.Dropdown = Dropdown

这将确保您的外部非webpack编译的javascript可以看到下拉类。但这是不好的做法，我真的建议你坚持使用index.jsx文件，因为它可以保护你免受全局命名空间中的类和库的暴露，并且是最佳实践。

React JSX类库导出无效

1 个答案: