機能コンポーネントを使用して小道具で引数を渡す方法

Question

機能コンポーネントを使用して小道具で引数を渡す方法はここにあります。 私のクリックイベントはPopUpHandleからPopUpHandle私はContentSectionコンポーネントから値を取得する必要があります。 ContentSectionがリストになります。各リストをクリックすると、現在クリックされているリストのvalueが得られます。私はこのコードで私のconsoleを印刷しましたが、undefinedが印刷されましたが、機能コンポーネントをどのように処理するのか分かりません。

class mainComponent extends Component { 
    constructor(props) { 
     super(props); 
     this.popTrigger = this.popTrigger.bind(this); 
    } 

    popTrigger(data){ 
     console.log(data); 
    } 

    render(){ 
     return(
      <Popup popTrigger={this.popTrigger} /> 
     ) 
    } 
} 
export default mainComponent; 

this.props.popTrigger()の呼び出し中にあなたがdataに合格しなかったポップアップコンポーネント

const PopUpHandle = ({ popTrigger, value}) => <li onClick={popTrigger.bind(this, value)} />; 

const ContentSection =({popTrigger, value}) =>(
    <div> 
     {value === 'TEST1' && (
     <div> 
      <PopUpHandle popTrigger={popTrigger} value={value} /> 
      </div> 
     </div> 
     )} 
     {value === 'TEST2' && (
     <div> 
      <PopUpHandle popTrigger={popTrigger} value={value} /> 
      </div> 
     </div> 
     )} 
    </div> 
) 

const ContentList = (({ items, popTrigger}) => (
    <div> 
     {items.map((value, index) => (
     <ContentSection 
      key={`item-${index}`} 
      popTrigger={popTrigger} 
      index={index} 
      value={value} 
     /> 
    ))} 
    </div> 
) 
); 

    class example extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      items: ['TEST1', 'TEST2', 'TEST3', 'TEST4'], 
     }; 
     this.popTrigger = this.popTrigger.bind(this); 
    } 

    popTrigger(){ 
     this.props.popTrigger() 
    } 

    render(){ 
     return(
      <ContentList popTrigger={this.popTrigger} items={this.state.items} /> 
     ) 
    } 
} 
export default example; 

Answer 1

popTrigger(data){ 
    console.log(data); 
} 

。あなたが引数を渡さなかった場合はjavascriptで、それはundefinedとみなされます。

Answer 2

valueの成分はPopUpHandleに渡されません。それを渡すように

render(){ 
    return(
     <ContentSection popTrigger={this.popTrigger} value={"test1"} /> 
    ) 
}