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>
)
}
}