案例及同级组件通信

# 插件安装

Error Lens 错误信息提示
react es6 快捷键代码模板

# Todo编写流程

列表展示
删除任务
修改任务状态
添加任务功能
双击修改任务
底部任务个数显示
清空任务
切换任务赛选
全选和取消全选

# 兄弟组件通信

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
思想：状态提升
公共父组件职责：提供共享状态、提供操作共享状态的方法
要通信的子组件只需通过 props 接收状态或操作状态的方法

\\a - 调用父组件的方法，传递数据
<button onClick = {this.say}></button>
say = ()=>{
    this.props.say('Hi,here')
}
\\b - 接收数据
<div>this.props.msg</div>
\\index - 父组件提供共享状态、操作共享状态方法
state={
    msg:''
}
<A say={this.changeMsg}/>//传递数据，调用方法
<B msg={this.state.msg}/>//接收数据
changeMsg = (msg)=>{//提供共享状态、方法
    this.setState({
        msg
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# context跨组件

实现思路

调用 React.createContext() 创建 Provider 和 Consumer 两个组件
```
const {Provider,Consumer} = React.creatContext()
```
1

使用 Provider 组件组为父节点

<Provider>
	<div>
    	<son/>
    <div>    
</Provider>

1
2
3
4
5

设置 value 属性，表示要传递的数据

<Provider value = {this.state.color}>
	<div>
    	<son/>
    <div>    
</Provider>

1
2
3
4
5

调用 Consumer 组件接收数据

<Consumer>  
{data=>(<div style={{color:data}}>data<div>)}    
</Consumer>

1
2
3

注意：Provider和Consumer 的使用是一对的

//导出 Consumer 
export {Consumer}

1
2

//导入 Consumer
import {Consumer} from './URL'

1
2

编辑

上次更新: 2023/02/07, 14:51:48

← 组件通信 Props和插槽→