如何在 react-redux 中从子级调用父级方法

Question

我必须通过迭代对象来生成选项卡。

父类是TabsList，子类是TabsListItems。数据作为道具从父母流向孩子。现在在子类中有一个 <li> 元素（这是 baisclly 选项卡）。 OnClick 其中的 selectTab 方法应该被调用，该方法在 actiotn.js 中 但是我的matchDispatchToProps(dispatch ) 方法在父级中。

如何调用绑定在父类中的方法？

我将一个对象作为道具传递给子类

父组件

    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?

反正我这里也复制一下。

你应该通过 props 将函数传递给子组件。

由于动作有一个参数来选择正确的选项卡，你可以使用一个函数返回一个函数：

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

这样你的子组件调用你的方法onSelect传递正确的参数。

在父（容器）组件上的 onSelect 方法中，您将调度您的操作：

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