如何在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

你，當你把它傳遞給產品組件使用界handleProductUpVote方法。

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

有2個解決方案：

1. 您應該使用onVote={this.onVote}在渲染方法。
2. 將構造函數中的屬性onVote的名稱更改爲this.handleProductUpVote。而你最終this.handleProductUpVote = this.handleProductUpVote.bind(this)和http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

   更新的渲染方法（即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 
} 

Answer 2

在你的產品組件刪除在handleUpVote綁定（），只是調用它像this.props.onVote(this.props.id);