加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – ReactDOM.render():无效的组件元素.不要传递组件类,

发布时间:2020-12-15 20:46:12 所属栏目:百科 来源:网络整理
导读:当我测试运行起反应时,会出现此错误 我的文件夹结构很简单,如下所示: app folder index.html index.js home.jswebpack.config.jsdist folder bundle.js index.html看起来像这样 !DOCTYPE htmlhtmlhead titlehello world app/title link rel="stylesheet" sr
当我测试运行起反应时,会出现此错误

我的文件夹结构很简单,如下所示:

app folder
  index.html
  index.js
  home.js
webpack.config.js
dist folder
  bundle.js

index.html看起来像这样

<!DOCTYPE html>
<html>
<head>
    <title>hello world app</title>
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src= "../dist/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

index.js是这样的:

var React = require('react');
var ReactDOM = require('react-dom');
var Home = require('./Home');

ReactDOM.render( Home,document.getElementById('app'));

和home.js这样:

var React = require('react');
var Home = React.createClass({
    render: function(){
        return(
            <div> hello from home </div>
        )
    }
});
module.exports = Home;

我通过这个webpack配置运行编译代码:

module.exports = {
    entry:[
    "./app/index.js"
    ],output: {
        path: __dirname + '/dist',filename: "bundle.js"
    },module: {
        loaders : [
            {test: /.js$/,exclude : /node_modules/,loader: "babel-loader",query: {
                    presets: ['react']
                }
            }
        ]
    }
}

编译后,我运行文件index.html.并且错误ReactDOM.render():无效的组件元素……出现了.我做错了什么?

ReactDOM.render将React类的实例作为其第一个参数.你直接传递了一个类.

而不是

ReactDOM.render(Home,document.getElementById('app'))

尝试如下.

ReactDOM.render(React.createElement(Home),document.getElementById('app'));

或JSX对应物

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

此外,如下所示,这可能是一个好主意.

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

在页面底部,而不是在< head>中,以便脚本可以找到< div id =“app”>< / div>.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读