父组件向子组件传值
通过props，将父组件的state传递给了子组件。
父组件片段
constructor(props){
super(props)
this.state={
message:"i am from parent"
}
}
render(){
return(
<Child txt={this.state.message}/>
)
}
}
子组件片段
render(){
return(
<p>{this.props.txt}</p>
)
}
子组件向父组件传值
父子组件通信不仅可以传值，还可以传递方法，父组件将更新数据的方法拿给子组件使用，子组件将自身的数据传入这个方法并调用，以此来改变父组件的数据。
整块代码
import React from "react";
import ReactDOM from "react-dom";
class Parent extends React.Component {
constructor(props) {
super(props);
this.Foo = this.Foo.bind(this);
this.state = {
name: "zzt"
};
}
Foo(data) {
this.setState({
name: data
});
}
render() {
return (
<div>
<div>{this.state.name}</div>
<Son data={this.Foo}/>
</div>
);
}
}
class Son extends React.Component {
handleClick = () => {
this.props.data("zizhoutong");
};
render() {
return <button onClick={this.handleClick}>change parent</button>;
}
}
ReactDOM.render(<Parent />, document.getElementById("root"));
