react-redux에서 자식의 부모 메서드를 호출하는 방법

Question

개체를 반복하여 탭을 생성해야합니다. 부모 클래스는 "TabsList"& 하위 클래스는 "TabsListItems"입니다. 데이터는 부모로부터 자식으로 소품으로 흐르고 있습니다. 이제 자식 클래스에는 < li> 요소 (baisclly 탭)가 있습니다. 그것의 OnClick actiotn.js에있는 "selectTab"메서드가 호출되어야합니다 하지만 내 matchDispatchToProps (dispatch) 메서드는 부모입니다. 부모 클래스에서 bind 인 메소드를 어떻게 호출 할 수 있습니까?

나는 상위 구성 요소 하위 클래스에 소품으로 개체를 전달하고

import React from 'react'; 
    import {connect} from 'react-redux'; 
    import {bindActionCreators} from 'redux'; 
    import {selectTab} from '../actions/index'; 
    import PlanTabsList from './PlanTabsList'; 

    class TabList extends React.Component { 
     constructor(props){ 
     super(props); 

     } 

     createTabItems(){ 
     return this.props.tabList.map((item, i) => { 
      return (
        <PlanTabsList key={i} tabList={item} /> 
      ) 
     }); 
     } 

     render() {   
     return (
      <div id="layout-header" className="layout-header"> 
      <div id="header" className="header"> 
       <ul className="tabs tabs--horizontal"> 

        {this.createTabItems()} 

       </ul> 
      </div> 
      </div> 
     ); 
     } 
    }; 


    function mapStateToProps(state){  
     return { 
     tabList: state.tabList, 
     activeTab: state.activeTab  
     } 
    } 

    function matchDispatchToProps(dispatch){ 
     return bindActionCreators({selectTab: selectTab}, dispatch); 
    }  
    export default connect(mapStateToProps, matchDispatchToProps)(TabList); 

이미 중복 된 질문에 대답

import React from 'react'; 
    class TabsListItems extends React.Component { 

     constructor(props){ 
     super(props); 
     console.log(this.props.tabList) 
     } 


     render() { 

     return (
      <li onClick={() => this.props.selectTab(this.props.tabList)} 
       role="presentation" className={"tab " }> 
       <a href="#"> 
       <div className="tab__label"> 
        <div className="tab__label__value">{this.props.tabList.name}</div> 
       </div> 
       </a> 
      </li>   
     ); 
     } 
    };  
    export default TabsListItems; 

Answer 1

하위 구성 요소 : how to get callback from child to parent class in react-redux?

어쨌든, 나는 그것을 복사한다. 여기도.

소품을 통해 하위 구성 요소에 기능을 전달해야합니다.

작업이 올바른 탭을 선택하는 매개 변수를 가지고, 당신은 함수 반환하는 기능을 사용할 수 있습니다 : 자녀의 구성 요소는 정확한 전달하여 방법 onSelect 호출이 방법으로

createTabItems() {  
return this.props.tabList.map((item, i) => { 
    return (
    <TabsListItem key={i} tabList={item} onSelect={() => this.onSelect(i).bind(this)} /> 
    ); 
}); 

}

을 매개 변수. 부모 (컨테이너) 구성 요소에 대한 당신의 onSelect 방법에서

당신이 다음 조치를 파견 :

onSelect(i) { 
    this.props.selectTab(i); 
} 

[REDUX 사용하여 중첩 하위 구성 요소에서 부모 요소의 함수를 호출하는 방법]의