如何使用 React.Component 在另一個組件上正確傳遞函數道具？

Question

我正在 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>
        );
    }
}

我想在這個組件（產品）中傳遞函數 onVote

class Product extends React.Component {
    handleUpVote() {
        this.props.onVote(this.props.id).bind(this) /* the error is here, I am trying
 to pass the id props, and invoke the onVote prop here */
    }
    render() {
        return (
            <div className="item">
                <div className="image">
                    <img src={this.props.product_image_url} />
                </div>
                <div className="middle aligned content">
                    <div className="description">
                        <a onClick={this.handleUpVote}>
                            <i className="large caret up icon"/>
                        </a>
                        {this.props.votes}
                    </div>
                    <div className="description">
                        <a href={this.props.url}>
                        {this.props.title}
                        </a>
                    </div>
                    <div className="extra">
                        <span> Submitted by: </span>
                        <img 
                            className="ui avatar image"
                            src={this.props.submitter_avatar_url}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

我這里的其他道具沒有問題。 我正在嘗試調用 handleUpVote 上的函數，我使用了綁定它，但無法使其工作。 幫助？

Answer 1

將其傳遞給 Product 組件時，您必須使用有界handleProductUpVote方法。

正如您在構造函數中看到的，您已經綁定它並分配給this.onVote屬性。

有2種解決方案：

1. 您應該在渲染方法中使用onVote={this.onVote} 。
2. 將構造函數中的屬性onVote的名稱更改為this.handleProductUpVote 。 你最終得到this.handleProductUpVote = this.handleProductUpVote.bind(this)並在渲染方法中留下分配（即onVote={this.handleProductUpVote} ）

更多信息請訪問http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

更新：

並更新您的產品類：

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
}

Answer 2

刪除 Product 組件中 handleUpVote() 中的綁定，然后像this.props.onVote(this.props.id);一樣調用它this.props.onVote(this.props.id);