组件时封闭的，在开发当中不免要经行，组件与组件之间的数据共享，这时我们就需要打破组件的封闭性，让组件与外界经行通讯。
props
- 组件时封闭的，要接收或者传递数据要使用props来实现。
- props的作用：用来传递和接收组件传递的数据。
- 传递数据：给组件标签添加属性。
- 接收数据：函数组件通过参数props接收数据，类组件同过this.props来接收数据。
props的特点
- 可以给组件传递任意类型的数据
- props是只读的，不允许修改props的数据
- 注意：在类组件中使用的时候，需要把props传递给super()，否则构造函数无法获取到props
class Hello extends React.Component {
constructor(props) {
// 推荐将props传递给父类构造函数
super(props)
}
render() {
return <div>接收到的数据：{this.props.age}</div>
}
}
props.children属性
- children属性：表示该组件的子节点，只要组件由子节点，props就会有该属性。
- children属性与普通的props一样，只可以为任意（文本、React元素、组件、函数）
function Hello(props) {
return (
<div>
该组件的子节点：{props.children}
</div>
)
<Hello>我是子节点</Hello>
函数组件通讯
子组件
function Hello(props) {
console.log(props)
return (
<div>接收到数据：{props.name}</div>
)
}
父组件
<Hello name="jack" age={19} />
类组件通讯
子组件
class Hello extends React.Component {
render() {
return (
<div>接收到的数据：{this.props.age}</div>
)
}
}
父组件
<Hello name="jack" age={19} />
组件通讯三种方式
父传子
1.父组件提供要传递的state数据
2.给子组件标签添加属性，值为 state 中的数据
3.子组件中通过 props 接收父组件中传递的数据
父组件提供数据并且传递给子组件
class Parent extends React.Component{
state = { lastName: '王' }
render() {
return (
<div>
传递数据给子组件：<Child name={this.state.lastName} />
</div>
)
}
}
子组件接收数据
function Child(props) {
return <div>子组件接收到数据：{props.name}</div>
}
子传父
思路：利用回调函数，父组件提供回调函数，子组件调用，将传递的数据当作回调函数的参数。
1.父组件提供一个回调函数。（用于接收参数）
2.将函数作为属性的值，传递给子组件。
3.子组件通过props调用回调函数。
4.将子组件的数据作为参数传递回调函数。
//父组件提供函数并且传递给字符串
class Parent extends React.Component {
getChildMsg = (msg) => {
console.log('接收到子组件数据', msg)
}
render() {
return (
<div>
子组件：<Child getMsg={this.getChildMsg} />
</div>
)
}
}
//子组件接收函数并且调用
class Child extends React.Component {
state = { childMsg: 'React' }
handleClick = () => {
this.props.getMsg(this.state.childMsg)
}
return (
<button onClick={this.handleClick}>点我，给父组件传递数据</button>
)
}
注意：回调函数中 this 指向问题！
兄弟组件
- 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
- 思想：状态提升
- 公共父组件职责:
1.公共父组件职责
2.提供操作共享状态的方法
-要通讯的子组件只需通过 props 接收状态或操作状态的方法
组件通讯-context
复杂嵌套的组件如果像经行通信，可以用context来实现。
调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。
const { Provider, Consumer } = React.createContext()
使用 Provider 组件作为父节点。
<Provider>
<div className="App">
<Child1 />
</div>
</Provider>
设置 value 属性，表示要传递的数据。
<Provider value="pink">
调用 Consumer 组件接收数据。
<Consumer>
{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>
总结：
1.如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯。
2.Context提供了两个组件：Provider 和 Consumer
3.Provider组件：用来提供数据
4.Consumer组件：用来消费数据
网友评论