javascript - Prop 不转移给孙子

我能够将prop函数从父级传递给子级，但似乎无法将其从子级传递给大子级。

有问题的代码：

var ProposalList = React.createClass({

    render : function() {

        var proposalNode = this.props.data.map(function(proposal) {
            return (
                <ProposalItem submitForm={this.props.submitForm} id={proposal.id} name={proposal.name} price={proposal.price}/>
            );
        });

        return (
            <div><ul className="proposalList">{proposalNode}</ul></div>
        );
    }

});

发生冲突的行是一个称为“ ProposalItem”的子级，被标识为未定义的prop是：submitForm = {this.props.submitForm}或“ submitForm”。

ProposalList呈现良好。

<ProposalList submitForm={this.loadFromServer} data={this.state.data} />

我似乎无法抓住SubmitForm并将其传递给下一个子组件。

最佳答案

使用.map时，请注意现在是什么this，您忘记了将thisArg传递给map，所以this应该是window或其他名称，而不是您期望的react组件。

var proposalNode = this.props.data.map(function (proposal) {
    return (
        <ProposalItem submitForm={this.props.submitForm} id={proposal.id} name={proposal.name} price={proposal.price}/>
            );
}, this);
// ^^^^ add this param.

应该管用。

或者，您可以使用var self = this;，然后在地图回调中使用self.props.submitForm，或使用.bind将地图的回调函数绑定到react组件。