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'

回答

相关问题