Question

我必须通过迭代一个对象来生成标签。

家长班是TabsList＆amp;子类是TabsListItems。数据从父级流向子级作为道具。现在在子类中有一个<li>元素（它是baisclly tab）。应调用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?

无论如何，我也在这里复制。

您应该通过道具将一个函数传递给子组件。

由于动作具有选择正确选项卡的参数，因此可以使用返回函数的函数：

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中从子进程调用父方法

父组件

子组件

1 个答案: