Question

我试图用reactjs在html表中显示一些数据。但我一直在努力 error 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>

Answer 1

我认为您遇到的主要问题是您的Table组件是在您网页的全局范围内定义的，这意味着您的this将被取消定义，因为我们会在＆＃中34;严格＆＃34;模式。其次，您将Table组件作为函数直接调用，而不是使用JSX。渲染时，React假定this的特定值，但在这种情况下它是undefined，因此您看到错误。

所以，这里的第一步是将渲染函数更改为：

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

最后，我认为您在尝试上述内容后会发现您的目标容器并不完全正确。它正在寻找ID为container的元素，但该元素并不存在于您的HTML中，因此您也需要在其中进行更改。

React Uncaught TypeError：无法读取未定义的属性“__reactAutoBindMap”

1 个答案: