react Provider Consumer 使用方法

相关文章 React Context的使用方法

跨几个组件传递值或者方法的时候, 如果依赖父子组件传值, 那势必会很麻烦. 好在react提供了Provider 和 Consumer

1 调用react的createContext()方法, 产生生产者和消费者组件.

bash 复制代码
// context.js
import React from 'react'
let { Consumer, Provider } = React.createContext();
export {
    Consumer,
    Provider
}

在父(祖先)级组件中, 把要传递东西的后代组件包起来, 要传递的东西放进value里面, value是一个对象, 所以看着像双括号语法, 其实不是.

bash 复制代码
import React from 'react'
import List from './List'
import {Provider} from './context'
export default class TodoWrapper extends React.Component {
    state = {
        list: []
    }
    task = React.createRef()
    handleClick = () => {
        let list = [...this.state.list, this.task.current.value]
        this.setState({
            list: list
        })
        this.task.current.value = ''
    }
    deleteTask = (index) => {
        let list = this.state.list
        list.splice(index, 1)
        this.setState({
            list: list
        })
    }
    render() {
        return (
            <Provider value={{deleteTask: this.deleteTask}}>
                <input type="text" ref={this.task}/>
                <button onClick={this.handleClick}> Add </button>
                <List list={this.state.list} deleteTask={this.deleteTask}/>
            </Provider>
        );
    }
}

后代组件中的组件放在Consumer里面, 内部是一个函数, 这个函数接受一个对象作为参数, 参数是Provider里面提供的值. 然后直接使用就可以了.

bash 复制代码
import React from 'react'
import {Consumer} from './context'

export default class List extends React.Component{

    render() {
        const { list } = this.props
        return (
            <Consumer>
                {
                    ({ deleteTask }) => {
                        return list.map((item, index) => {
                            return (
                                <li key={item + index}>
                                    { item }
                                    <button onClick={()=>{deleteTask(index)}}> delete </button>
                                </li>
                            )
                        })
                    }
                }
            </Consumer>
        );
    }
}
相关推荐
草梅友仁2 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古2 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan2 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥3 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程3 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer3 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_3 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工4 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
EndingCoder4 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
半夏陌离4 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端