一、父傳子 - 函數(shù)式組件

function Father (props) {const {money} = props; // 解構(gòu)render() {<div><Child getSonMoney={money}/></div>} }function Child (props) {return (<div><p>我爸爸現(xiàn)在有存款：${props.getSonMoney}</p></div>) }const msg = {money: 1000000};ReactDOM.render(<Father {...msg} />, document.getElementByid('root'))

二、子傳父 - 函數(shù)式組件

三、父傳子 - 類式組件

class Father {state = {money: 199999}render() {<div><Child getSonMoney={this.state.money}/></div>} }class Child {return (<div><p>我爸爸現(xiàn)在有存款：${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>我爸爸現(xiàn)在有存款：${this.props.getSonMoney}</p><button onClick={this.handleClick}>發(fā)送數(shù)據(jù)</button></div>) }ReactDOM.render(<Father/>, document.getElementByid('root'))

總結(jié)

以上是生活随笔為你收集整理的react 组件传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。