react Provider Consumer 使用方法

���关文章 React Context的使用方法

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

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

// context.jsimport React from 'react'let { Consumer, Provider } = React.createContext();export {    Consumer,    Provider}

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

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 (            {deleteTask: this.deleteTask}}                this.task}/                this.handleClick} Add                 this.state.list} deleteTask={this.deleteTask}/                    );    }}

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

import React from 'react'import {Consumer} from './context'export default class List extends React.Component{    render() {        const { list } = this.props        return (                            {                    ({ deleteTask }) => {                        return list.map((item, index) => {                            return (                                item + index}                                    { item }                                    ()={deleteTask(index)}}> delete                                                             )                        })                    }                }                    );    }}