网站制作导航栏怎么做,psd模板 转 网站,广告公司网络推广计划,网站软文是什么相关文章 React Context的使用方法
跨几个组件传递值或者方法的时候, 如果依赖父子组件传值, 那势必会很麻烦. 好在react提供了Provider 和 Consumer
1 调用react的createContext()方法, 产生生产者和消费者组件.
// context.js
import React from react
let { Consumer, Pr…相关文章 React Context的使用方法
跨几个组件传递值或者方法的时候, 如果依赖父子组件传值, 那势必会很麻烦. 好在react提供了Provider 和 Consumer
1 调用react的createContext()方法, 产生生产者和消费者组件.
// context.js
import 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.listlist.splice(index, 1)this.setState({list: list})}render() {return (Provider value{{deleteTask: this.deleteTask}}input typetext ref{this.task}/button onClick{this.handleClick} Add /buttonList list{this.state.list} deleteTask{this.deleteTask}//Provider);}
}后代组件中的组件放在Consumer里面, 内部是一个函数, 这个函数接受一个对象作为参数, 参数是Provider里面提供的值. 然后直接使用就可以了.
import React from react
import {Consumer} from ./contextexport default class List extends React.Component{render() {const { list } this.propsreturn (Consumer{({ deleteTask }) {return list.map((item, index) {return (li key{item index}{ item }button onClick{(){deleteTask(index)}} delete /button/li)})}}/Consumer);}
}
