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>. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |