は、私は現在、そのような支柱の上にマッピングしています

Question

に反応：

renderList(item) { 
     return(
     </div> 
      shows up 
     </div> 
    ) 
    } 

    render() { 
    return(
     <div> 
      {this.props.items.map(this.renderList)} 
     </div> 
    ); 
    } 
} 

私は

this.props.completed 

にの簡易版を渡したいと思い、別の小道具を持っています何をしたいのですか

renderList(item, completed) { 
     return(
     </div> 
      shows up 
     </div> 
    ) 
    } 

    render() { 
    return(
     <div> 
      {this.props.items.map(this.renderList(this.props.items, this.props.completed)} 
     </div> 
    ); 
    } 
} 

このマップ機能で別の小道具を渡すことはできますか？

Answer 1

これについては少なくとも3つの方法があります。最も簡単なのは、あなたのコンポーネントインスタンスにrenderListを結合して、その中にthis.props.completedを参照することです：

constructor (props) { 
    super(props); 
    // it's more efficient to bind your functions once in the constructor than 
    // doing so on every render 
    this.renderList = this.renderList.bind(this); 
    } 

    renderList(item) { 
     const completed = this.props.completed; 
     return(
     <div> 
      shows up 
     </div> 
    ) 
    } 

    render() { 
    return(
     <div> 
      {this.props.items.map(this.renderList)} 
     </div> 
    ); 
    } 

別のオプションは、関数にプロパティを渡すためにクロージャを使用することです：

renderList(completed, item) { 
     return(
     <div> 
      shows up 
     </div> 
    ) 
    } 

    render() { 
    const completed = this.props.completed; 
    const renderList = this.renderList; 
    return(
     <div> 
      {this.props.items.map(function (item) { 
      return renderList(completed, item); 
      })} 
     </div> 
    ); 
    } 

第三の選択肢は次のようになりプロパティをmap()コールバックにバインドします。

renderList(completed, item) { 
     return(
     <div> 
      shows up 
     </div> 
    ) 
    } 

    render() { 
    return(
     <div> 
      {this.props.items.map(this.renderList.bind(this, this.props.completed))} 
     </div> 
    ); 
    }