我有容器和组件。如何将动作(或?)传递给子组件?
我处理动作的容器
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
}
};
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}/>
);
}
}