javascript - Prop 未转移给孙子

Question

我能够将 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并将其传递给下一个子组件。

Answer 1

使用时.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;，然后在 map 回调中使用self.props.submitForm，或者使用.bind将 map 的回调函数绑定(bind)到react组件。