父传值给子
父组件将自己的状态传递给子组件,子组件当做属性来接收props,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变
import React, { Component } from "react";
// 父组件
class Farther extends Component {
// 父的数据
state = {
msg:"父的数据"
}
render() {
return (
<div>
// 父组件将自己的状态传递给子组件
<Son fun={this.returnMsgToChild.bind(this)}></Son>
</div>
);
}
// 将数据准备好,等子来要
returnMsgToChild(){
return this.state.msg;
}
}
// 子组件
class Son extends Component {
render() {
return (<>
<div>我是子组件</div>
// 子组件当做属性来接收props
<button onClick={this.giveMeMsg.bind(this)}>按钮</button>
</>);
}
// 向父组件要数据
giveMeMsg(){
// 执行父给的方法
console.log("子向父要的是:",this.props.fun());
}
}
export default Farther;
子传值给父
通过属性传递方法,方法依旧需要子去执行,但是子需要将自己的数据传递给该方法,由父接收并且可以打印输出
import React, { Component} from "react";
// 父组件
class Farther extends Component {
render() {
return (
<div>
<Son fun={this.SonSetMsg.bind(this)}></Son>
</div>
);
}
// 父亲准备一个篮子,空的,需要子往里放东西
SonSetMsg(msg) {
console.log(msg);
}
}
// 子组件
class Son extends Component {
// 子的数据
state = {
msg:"子的数据"
}
render() {
return (
<div>
这是子组件
<button onClick={this.setMsg.bind(this)}>子把数据放篮子里</button>
</div>
);
}
// 子存放数据
setMsg() {
this.props.fun(this.state.msg);
}
}
export default Farther;