一、父传子 - 函数式组件

function Father (props) {const {money} = props; // 解构render() {<div><Child getSonMoney={money}/></div>}
}function Child (props) {return (<div><p>我爸爸现在有存款：${props.getSonMoney}</p></div>)
}const msg = {money: 1000000};ReactDOM.render(<Father {...msg} />, document.getElementByid('root'))

二、子传父 - 函数式组件

三、父传子 - 类式组件

class Father {state = {money: 199999}render() {<div><Child getSonMoney={this.state.money}/></div>}
}class Child {return (<div><p>我爸爸现在有存款：${this.props.getSonMoney}</p></div>)
}ReactDOM.render(<Father/>, document.getElementByid('root'))

四、子传父 - 类式组件

class Father {state = {money: 0}getChildMoney(data) {this.setState({money: data})}render() {<div><p>儿子的存款有：<span>{this.state.money}</span></p><Child money={this.getChildMoney}/></div>}
}class Child {state = {money: 199999}handleClick() {this.props.money(this.state.money)}return (<div><p>我爸爸现在有存款：${this.props.getSonMoney}</p><button onClick={this.handleClick}>发送数据</button></div>)
}ReactDOM.render(<Father/>, document.getElementByid('root'))