如何通过redux将动作传递给孩子?

问题描述 投票:1回答:1

我有容器和组件。如何将动作(或?)传递给子组件?

我处理动作的容器

class HeaderContainer extends React.Component {
  render() {
    const { index } = this.props;

    return (
        <Header index={index} onChangeIndex={...}/>
    );
  }
}

const putStateToProps = (state) => {
  return {
    index: state.schedule.index
  };
};

export default connect(putStateToProps, null)(HeaderContainer)

我的从容器渲染数据的组件

const Header = ({ ...props }) => {
  const { index, onChangeIndex} = props;

  return (
      <AppBar position="static" color="default">
        <Tabs value={index} onChange={onChangeIndex}>
          ...
        </Tabs>
      </AppBar>
  )
};

有我的动作

export const changeIndex = (index) => {
  return {
    type: SCHEDULE_CHANGE_INDEX,
    payload: index
  }
};
javascript reactjs redux
1个回答
2
投票
class HeaderContainer extends React.Component {
  handleChangeIndex = (event) => {
    const index = event.target.value; // You may need to change this line
    this.dispatch(changeIndex(index));
  } 

  render() {
    const { index } = this.props;

    return (
        <Header index={index} onChangeIndex={handleChangeIndex}/>
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.