Question

我必须渲染一些标签。点击它，它应该突出显示。我有来自reducer的tabList对象（硬编码值）。单击选项卡会生成一个动作，该动作设置＆＃34;状态＆＃34;点击标签对象（我称之为＆＃34; activeTab＆＃34;）。

在渲染tabList（所有选项卡）时，我正在检查＆＃34; rendered_tabid == active_tabid＆＃34;然后添加一个类＆＃34;活跃＆＃34; （这是有条件的基础）

有效-制表reducer.js

export const tabReducer = () => {
    return [
      {
        id: 1,
        name:"Dental Page",
        url: '#dentalPage'
      },
      {
        id: 2,
        name:"Vision Page",
        url: '#visionPage'
      },
      {
        id: 3,
        name:"Other page Tab",
        url: '#OtherPage'
      }
    ]
}


const activeTabReducer = (state = {}, action) => {
  switch(action.type) {
    case "TAB_SELECTED": return action.payload;
      break;
  }
  return state;
}

export default activeTabReducer;

（combined-reducer）index.js

import {combineReducers} from 'redux';
import activeTabReducer, {tabReducer} from './active-tab-reducer';

const allReducers = combineReducers({
  tabList: tabReducer,
  activeTab: activeTabReducer
});

export default allReducers;

（行动）index.js

export const selectTab = (tab) => {
  console.log('action invoked', tab);
  return {
    type: "TAB_SELECTED",
    payload: tab
  }
}

tablist.js

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

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

  createTabItems(){    
    return this.props.tabList.map((item, i) => {
      return (
        <TabsListItem 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);

tabListItem.js

import React from 'react';
class  TabListItem extends React.Component {
  constructor(props){
    super(props);
    console.log(this.props.tabList)
  }

  render() {   
    return (
      <li onClick={() => this.props.selectTab(this.props.tabList)}
          className={"tab  "+((this.props.activeTab.id==item.id)?'active':'')+""+( (this.props.activeTab.id==undefined) && (item.id == 1)?'active':'' ) 
          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 TabListItem;

当我点击任何标签（来自tabListItem）时，应该调度一个动作TAB_SELECTED动作，它将状态设置为＆＃34; activeTab＆＃34;对象

如何从孩子那里产生动作？

Answer 1

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

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

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 个答案: