天天看點

React兄弟元件中傳遞參數

React中,兄弟元件之間傳值,可以使用狀态提升的方式進行傳遞參數

将兩個兄弟元件中需要穿的參數提升到父元件中,由其公共的父元件來管理狀态,由公共元件提供共享狀态和修改共享狀态的方法,子元件使用props接收狀态或操作狀态的方法,就可以實作兄弟元件之間的傳參

// 父元件
class Parent extends React.Component {
    state={count:0}
    addCount=(data)=>{
        this.setState({
            count:this.state.count+data
        })
    }
    render() {
        return (
            <div>
                <Child1 count={this.state.count} />
                <Child2 addClick={this.addCount} />
            </div>
        )
    }
}

// 第一個子元件
class Child1 extends React.Component {
    render() {
        return (
            <div>
                計數器:{this.props.count}
            </div>
        )
    }
}


// 第二個子元件
class Child2 extends React.Component {
    state={
        num:5
    }
    render() {
        return (
            <div>
                <button onClick={()=>{this.props.addClick(this.state.num)}}>點選+5</button>
            </div>
        )
    }
}