ReactDOM.render（）：無效的組件元素。而是通過組件類的，要確保通過傳遞實例它React.createElement

這個錯誤顯示出來，當我試運行反應過來ReactDOM.render（）：無效的組件元素。而是通過組件類的，要確保通過傳遞實例它React.createElement

我的文件夾結構簡單這樣的：

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

指數.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（）：無效的組件元素...出現了。我做錯了什麼？

來源

2016-03-29 angry kiwi

ReactDOM.render需要作出反應類的實例作爲第一個參數。你直接傳授課程。

所以不是

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>。

來源

2016-03-29 08:05:24 dannyjolie

你必須使用渲染功能就像

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

來源

2016-03-29 07:58:35

ReactDOM.render（）：無效的組件元素。而是通過組件類的，要確保通過傳遞實例它React.createElement

回答

相關問題