J'ai un conteneur et un composant. Comment passer l'action (ou?) Aux composants enfants?

Mon conteneur qui gère les actions

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)

Mon composant qui rend les données du conteneur

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

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

Il y a mon action

export const changeIndex = (index) => {
  return {
    type: SCHEDULE_CHANGE_INDEX,
    payload: index
  }
};
1
Almaz Kaliev 4 nov. 2019 à 18:30

1 réponse

Meilleure réponse
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}/>
    );
  }
}
2
Ozan Bulut 4 nov. 2019 à 15:39