关于context:邂逅react十二-组件通信之context

对于context概念解释起来很绕,很多性能也不罕用,就简略解释一下最罕用的办法 react中跨组件通信能够通过props逐层传递或者context创建对象进行数据传递,const name=React.createContext('name')再通过订阅取值上代码~~~ //创立context对象const MyContext=React.createContext('getText')//根组件class ContextCom extends Component { state = { name:'我是大白白', level:999, content:'你好~~~~我是子组件2' } render() { return ( <div> {/* 订阅context 给state赋值 */} <MyContext.Provider value={this.state}> <Page/> </MyContext.Provider> </div> ); }}//父组件class Page extends Component { state = { } render() { return ( <div> <div> 类子组件 <PageHead/> </div> <div> 函数子组件 <Content/> </div> <div>我是内容~~~~</div> </div> ); }}//子组件1 类组件class PageHead extends Component { state = { } render() { console.log(this.context) return ( <div> <h2>name:{this.context.name}</h2> <h2>level:{this.context.level}</h2> </div> ); }}//给PageHead的contextType赋值 PageHead.contextType=MyContext//子组件2 函数组件function Content(){ return( //函数组件 取值用 Consumer <MyContext.Consumer> { value=>{ return( // **留神 函数组件中取值为 value. <div>内容:{value.content}</div> ) } } </MyContext.Consumer> )} export default ContextCom;分享结束 感激浏览 ...

July 19, 2020 · 1 min · jiezi