1.在父组件定义好回调函数接收组件A传过来的值
// 引入组件
import SonA from "./components/SonA"
import SonB from "./components/SonB"
class App extends Component {
constructor(props) {
super(props)
this.state = {
coment: "初始值"
}
}
changeA = (data) => {
this.setState({
coment: data
})
}
render () {
return (
<div>
<span>这是app组件</span>
{/* 兄弟组件通信 */}
<SonA changeA={this.changeA}></SonA>
{/* 组件A传过来的值传给组件B */}
<SonB coment={this.state.coment}></SonB>
<p>在根组件显示:{this.state.coment}</p>
</div>
)
}
}
2.组件A通过函数回调传值给父组件
class SonA extends Component {
constructor(props) {
super(props)
this.state = {
comA: "我是组件A的值"
}
}
render () {
return (
<>
<div>
<p>我是兄弟组件A</p>
<button onClick={this.props.changeA.bind(this, this.state.comA)}>点击传值</button>
</div>
</>
)
}
}
3.父组件接收到组件A的值,在把接收的值传给组件B
class SonB extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render () {
return (
<>
<div>
<p>我是兄弟组件B</p>
<p>在组件B显示:{this.props.coment}</p>
</div>
</>
)
}
}