javascript - React.js 如何将回调传递给子组件？

Question

我想将回调传递给双重嵌套组件，虽然我能够有效地传递属性，但我无法弄清楚如何将回调绑定(bind)到正确的组件以便触发它。我的结构如下所示:

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

单击列表项时应触发回调，即 OutermostComponents 方法“onUserInput”，但我得到“未捕获错误:未定义不是函数”。我怀疑问题在于我如何在第一个组件中渲染 SecondNestedComponent 并向其传递回调。代码看起来像这样:

var OutermostComponent = React.createClass({
    onUserInput: //my function,
    render: function() {
        return (
            <div>
            //other components 
                <FirstNestedComponent
                    onUserInput={this.onUserInput}
                />
            </div>
        );
    }
});

var FirstNestedComponent = React.createClass({
    render: function() {
        return (
            <div>
            //other components 
                <SecondNestedComponent
                    onUserInput={this.onUserInput}
                />
            </div>
        );
    }
});
var SecondNestedComponent = React.createClass({
    render: function() {
        var items = [];
        this.props.someprop.forEach(function(myprop) {
            items.push(<DynamicallyGeneratedListItems myprop={myprop} onUserInput={this.props.onUserInput}/>);}, this);
        return (
            <ul>
                {items}
            </ul>
        );
    }
});

如何正确地将回调绑定(bind)到适当的嵌套组件？

Answer 1

您正在将 this.onUserInput 作为属性传递给 FirstNestedComponent。因此，您应该在 FirstNestedComponent 中以 this.props.onUserInput 的形式访问它。

var FirstNestedComponent = React.createClass({
    render: function() {
        return (
            <div>
                <SecondNestedComponent
                    onUserInput={this.props.onUserInput}
                />
            </div>
        );
    }
});