复合组件的信息传递
2021-02-03 本文已影响0人
转移到CSDN名字丹丹的小跟班
1. 当两个组件有共同的父组件的时候，我们可以使用传递属性和方法的方式进行组件之间的通讯
//创建父组件
class Panel extends React.Component {
constructor() {
super()
//创建状态
this.state = {
num: 0
}
}
render() {
return <div>
//使用状态，将值传递给子组件
<Header num={this.state.num}></Header>
//将改变状态值的方法传递给子组件
<Body fn={this.add}></Body>
</div>
}
//创建改变状态值的方法
add = () => {
this.setState({num: this.state.num + 1})
}
}
//创建头部组件（子组件1）
class Header extends React.Component {
constructor(props) {
super(props)
}
render() {
return <div>
//接收并显示父组件穿的值
<h4>点击次数：{this.props.num}</h4>
</div>
}
}
//创建身体组件（子组件2）
class Body extends React.Component {
constructor() {
super()
}
render() {
return <div>
//接收并绑定父组件穿的方法
<button onClick={this.props.fn}>点我啊</button>
</div>
}
}
ReactDOM.render(
<Panel></Panel>,
document.getElementById('root')
)
