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>
        );
    }
}
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试