전달 추가 인수는 내가 현재 지금과 같은 소품을 통해 매핑하고있어

Question

반응 내가 무엇을하고 싶은지

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 가지 방법이 있습니다. 가장 간단한은 내 구성 요소 인스턴스 참조 this.props.completed에 renderList을 결합하는 것입니다

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> 
    ); 
    } 

이 세 번째 옵션은 다음과 같습니다

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> 
    ); 
    } 

또 다른 옵션은 함수에 속성을 전달하는 클로저를 사용하는 것입니다 속성을 map() 콜백에 바인딩합니다.

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

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