Question

我正在使用webpack和babel将我的jsx文件预处理为javascript。我的配置如下所示：

Webpack.config.js

module.exports = {
    entry: "./react/main.jsx",
    output: {
        path: __dirname,
        filename: "./public/javascripts/app.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

./ react.main.jsx

import { render } from 'react-dom'
import HelloWorld from './components/helloworld.jsx'
render(<HelloWorld />,document.body);

./反应/组件/ helloworld.jsx

import React from 'react'

class HelloWorld extends React.Component {
    static render() {
        return (
            <div>
                <h1>Hello World!</h1>
                <p>This is some text</p>
            </div>
        );
    }
}

export default HelloWorld;

当我运行webpack时，我在app.js的这一行继续收到错误React is not defined

(0, _reactDom.render)(React.createElement(_helloworld2.default, null), document.body);

如果我在main.jsx文件中特别包含反应，则错误消失，然后错误

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.将null值指向app.js中React.create element的第二个参数

我确定这是我遗漏或做错的事，但我不知道它是什么。

Answer 1

将此行代码添加到 main.jsx 文件中。

import React from 'react'

作为react-dom使用react，但主要原因是该文件包含JSX，而JSX只是转换为React.createElement调用 - Felix Kling

从升级指南React v0.14

现在直接将document.body作为容器传递给ReactDOM.render 发出警告，因为这样做会导致浏览器扩展出现问题修改DOM。

所以将标记更改为

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

之后，您可以将组件渲染到 div 标记

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

由于

Answer 2

感谢大家的帮助。我没有意识到react-dom本身没有require 'react'。无论如何，问题的另一半是app.js编译后的位置。我把它放在身体后面的底部，一切都很完美。我收到了关于document.body的警告，因此我将更改为使用div。

巴贝尔的问题反应预设和反应

2 个答案: