React Uncaught TypeError：無法讀取未定義的屬性'__reactAutoBindMap'

我想在reactjs的HTML表格中顯示一些數據。但我不斷收到錯誤未捕獲TypeError：無法讀取未定義的屬性'__reactAutoBindMap'。我無法弄清楚我的代碼有什麼問題。React Uncaught TypeError：無法讀取未定義的屬性'__reactAutoBindMap'

<!DOCTYPE html> 
<html> 
    <head> 
     <title>React Flux</title> 
     <script src="https://fb.me/react-0.13.3.js"></script> 
     <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    </head> 
    <body> 

     <div id="component" style="color:red"></div> 

     <script type="text/jsx"> 


// 
// create component 
// 
var Table = React.createClass({ 

    render: function render() { 
     var _self = this; 

     var thead = React.DOM.thead({}, 
      React.DOM.tr({}, 
       this.props.cols.map(function (col) { 
        return React.DOM.th({}, col); 
      }))); 

     var tbody = this.props.rows.map(function (row) { 
      return React.DOM.tr({}, 
      _self.props.cols.map(function (col) { 
       return React.DOM.td({}, row[col] || ""); 
      })); 
     }); 

     return React.DOM.table({}, [thead, tbody]); 
    } 

}); 

var container = document.querySelector("#container"); 

var tableModel = { 
    cols: ["Name", "Age"], 
    rows: [{ 
     "Name": "Chase", 
      "Age": "27" 
    }], 

} 

React.render(Table(tableModel), container); 



     </script> 
    </body> 
</html>

來源

2016-01-17 johnsam

我相信你的主要問題是，你的Table組件您的網頁，這意味着你的this將是不確定的，因爲我們是在「嚴格」的模式在全球範圍內定義。其次，您直接調用Table組件作爲函數，而不是使用JSX。在渲染時，React假設this具體值，但在這種情況下，它是undefined，因此您看到的錯誤。

所以，在這裏的第一步將是您的渲染功能更改爲類似這樣：

React.render(<Table cols={tableModel.cols} rows={tableModel.rows} />, container);

最後，我想嘗試上述，你有針對性的容器後，你會發現不是很對。它正在尋找一個ID爲container的元素，但該元素不存在於您的html中，因此您需要在其中進行更改。

來源

2016-01-17 16:09:47

React Uncaught TypeError：無法讀取未定義的屬性'__reactAutoBindMap'

回答

相關問題