如何从 react-redux 中的 child 调用 parent 方法

Question

我必须通过迭代 object 来生成标签。

Parent class 是 TabsList & child class 是 TabsListItems。数据作为道具从 parent 流向 child。现在 child class 中有一个 <li> 元素（这是 baisclly 选项卡）。 OnClick 中的 selectTab 方法应该被调用，它在 actiotn.js 中但是我的matchDispatchToProps(dispatch )方法在parent。

如何调用绑定在 parent class 中的方法？

我正在将 object 作为道具传递给 child class

parent分量

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

child分量

    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

我已经回答了你重复的问题：

反正我也复制过来

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

由于该操作有一个 select 正确选项卡的参数，您可以使用返回函数的函数：

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

如何从 react-redux 中的 child 调用 parent 方法

How to call parent method from child in react-redux

reactjs

react-redux

parent分量

child分量