React里面的Context应用示例
发布时间:2020-12-15 20:35:25 所属栏目:百科 来源:网络整理
导读:// 1. 创建上下文 createContext()import React,{ Component } from ‘react‘;const Context = React.createContext();const store = { name: ‘小毛‘,sayHi(){ console.log(this.name) } }export default ContextSample extends Component{ render(){ ret
// 1. 创建上下文 createContext() import React,{ Component } from ‘react‘; const Context = React.createContext(); const store = { name: ‘小毛‘,sayHi(){ console.log(this.name) } } export default ContextSample extends Component{ render(){ return( <div> <Context.Provider value={store}> <div> <Context.Consumer> { /* 必须要一个函数 */} { value => <div onClick={() => value.sayHi()}>{value.name}</div> } </Context.Consumer> </div> </Context.Provider> </div> ) } }
<Context.Provider> 和 <Context.Consumer> 那样定义着写在那里,看着有点别扭。可以定义装饰器来渲染 const withProvider = Comp => props => ( <Context.Provider value={store}> <Comp {...props} /> </Context.Provider> ) const withConsumer = Comp => props => ( <Context.Consumer> { value => <Comp {...props} value={value} /> } </Context.Consumer> ) 然后调用装饰器,修改代码 @withConsumer class Inner extends Component{ render(){ return <div onClick={() => this.props.value.sayHi()}> { this.props.value.name } </div> } } @withProvider class ContextSample extends Component { render() { return ( <div> <Inner /> </div> ) } } export default ContextSample;
React的context是vuejs的provide&inject的来源,由高层组件向底层组件传值 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Electron – 项目报错整理【打包1】: WARNING: Make sure t
- [CORS:跨域资源共享] 同源策略与JSONP
- JSONKit报错解决方法
- VB.net版机房收费系统——Trim函数&Round函数&Mid函
- 关于有效代码的“QtCreator中的预期声明”
- ruby-on-rails-3 – 在rail3上编写嵌套的命名空间路由
- 如何用 React Native 创建一个iOS APP?(二)
- Howto let the SAX parser determine the encoding from th
- ruby-on-rails – 虚拟属性和批量分配
- react闲谈——10分钟学会react-redux异步