父组件给子组件传值:props
父组件:
<PCHeader content='父组件传值了'></PCHeader>
子组件:
componentDidMount() {
const msg = this.props.content;
console.log(23, msg) // '父组件传值了'
}
子组件向父组件传值:子组件里使用this.props…
父组件里:
constructor() {
super();
this.state = {
color: 'red'
};
this.handleColorChange = this.handleColorChange.bind(this);
};
render() {
return (
<div style={{color: this.state.color}}>
<PCHeader color={this.handleColorChange} content='父组件传值了'></PCHeader>
</div>
);
};
handleColorChange(color) {
this.setState({
color: color
})
}
子组件某个方法里执行:
this.props.color('blue');
这样子组件就该改变了父组件中的值,父组件中的字体颜色由原来的红色变成了蓝色。
有时两个组件并非单纯的父子关系,可以考虑createContext,具体参见https://editor.csdn.net/md/?articleId=103450617