javascript - 无法使用 React 从子组件调用父组件中的函数

Question

我有 2 个文件:

grid-body.jsx(GridBody)和grid-row.jsx(GridRow)

在 GridBody 中，我声明了一个函数 showAlert，并将其传递给每个 GridRow:

var GridBody = React.createClass({
    showAlert: function(msg) {
        alert(msg);
    },

    render: function() {
        var rows = this.props.rows.map(function(li) {
            return (
                <GridRow showAlert={this.showAlert} />
            );
        });

        return (
            <div>
                {rows}
            </div>
        );
    }
});

在 GridRow 中:

var GridRow = React.createClass({
    toggle: function() {
        this.props.showAlert('HEY');        // -----> ERROR - not a function
    },

    render: function() {
        <div>
            <a href="#" onClick={this.toggle} />
        </div>
    }
});

我正在尝试从父级调用 showAlert，并根据我所看到的示例，这是如何做到这一点，但我无法使其工作。

Answer 1

您在 GridView.render 内的 this 使用了错误的值。要么将其显式传递给 Array.map() (请参阅 docs 了解如何执行此操作)，要么将 this 分配给 最顶部的某个新变量>render() 并引用它。

Here这是一个非常非常好的评论，解释了为什么会发生这种情况，以及如果上述方法都不适合您的话，还有其他一些替代解决方法。