Javascript 如何使用React.component在另一个组件上正确传递函数道具？

我在es6+中介绍自己，我很难将一个函数道具传递给另一个组件

这是我的代码：

 class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.onVote = this.handleProductUpVote.bind(this);
    }
    handleProductUpVote(productId) {
        console.log(productId +" was upvoted.")
    }
    render() {
        const products = Data.map((product) => {
            return (
                <Product 
                    key={'product-'+product.id}
                    id={product.id}
                    title={product.title}
                    description={product.description}
                    url={product.url}
                    votes={product.votes}
                    submitter_avatar_url={product.submitter_avatar_url}
                    product_image_url={product.product_image_url}
                    onVote={this.handleProductUpVote}
                />

            );
        });

        return (
            <div className="ui items">
                {products}
            </div>
        );
    }
}

类ProductList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onVote=this.handleProductUpVote.bind（this）；
}
handleProductUpVote（productId）{
console.log（productId+“已被投票表决。”）
}
render（）{
const products=Data.map（（产品）=>{
返回(
);
});
返回(
{产品}
);
}
}

我想在此组件（产品）中传递函数onVote

类产品扩展了React.Component{
handleUpVote（）{
this.props.onVote（this.props.id）.bind（this）/*错误在这里，我正在尝试
通过id道具，并在此处调用onVote道具*/
}
render（）{
返回(
提交人：
);
}
}

---

我对这里的其他道具没有问题。我正在尝试调用handleUpVote上的函数，我使用了bind，但无法使其工作。帮助？

在产品组件中删除handleupNote（）中的绑定，然后像调用

this.props.onVote（this.props.id）一样调用它

将其传递给产品组件时，必须使用bounded

handleProductUpVote

方法

正如您在构造函数中看到的，您已经将其绑定并分配给

this.onVote

属性

有两种解决方案：

您应该在render方法中使用

onVote={this.onVote}

将构造函数中属性

onVote

的名称更改为

this.handleProductUpVote

。最后您将得到

this.handleProductUpVote=this.handleProductUpVote.bind（this）

，并将赋值保留在render方法中（即

onVote={this.handleProductUpVote}

）

更多信息请访问

更新：

并更新您的产品类别：

class Product extends React.Component {
    constructor(props) {
        super(props);
        this.handleUpVote = this.handleUpVote.bind(this);
    }
    handleUpVote() {
        this.props.onVote(this.props.id)
    }
    // the render method
}

---

我仍然有它的错误。“Uncaught TypeError:无法读取null的属性'props'”哦，就像Przemyslaw说的，为了扩展我的答案，在您的ProductList组件render（）中，将它作为一个prop传递，比如onVote={this.onVote}而不是onVote={this.handleProductUpVote}，这就是我在构造函数（props）{super（props）；this.onVote=this.handleProductUpVote.bind（this）；}在产品组件onVote={this.onVote}上，像这样在产品组件上调用，handleUpVote（）{this.props.onVote（this.props.id）；}，我仍然有“uncaughttypeerror:无法读取null的属性'props'，从您的回答中，这是我理解的。你能详细说明一下怎么做吗？我真的很感激这就是我所做的，在构造函数（props）{super（props）；this.onVote=this.handleProductUpVote.bind（this）；}和产品组件onVote={this.onVote}上，像这样在产品组件上调用handleUpVote（）{this.props.onVote（this.props.id）；}，我仍然有“Uncaught TypeError:无法读取null的属性'props'，从您的回答中，我了解到了这一点。您能详细说明一下如何操作吗？我非常感激我用固定产品组件更新了答案。您以错误的方式绑定HandleupNote，应该在构造函数中完成。

class Product extends React.Component {
    constructor(props) {
        super(props);
        this.handleUpVote = this.handleUpVote.bind(this);
    }
    handleUpVote() {
        this.props.onVote(this.props.id)
    }
    // the render method
}