zoukankan      html  css  js  c++  java
  • react的Provider,Consumer

    import React from 'react'
    import ReactDOM from "react-dom"
    const {Provider,Consumer} = React.createContext()
    class ContextDemo extends React.Component {
      state={
          newContext:'createContext'
      }
      render() {
        const {newContext} = this.state
        return (
            <Provider value={newContext}>
                <div>
                    <label>childContent</label>
                    <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
                </div>
                <Son />
            </Provider>
        )
      }
    }
    class Son extends React.Component{
        render(){
            return <Consumer>
                {
                    (name)=>
                        <div style={{border:'1px solid red','60%',margin:'20px auto',textAlign:'center'}}>
                            <p>子组件获取到的内容:{name}</p>
                            <Grandson />
                        </div>
                    
                }
            
            </Consumer>
        }
    }
    class Grandson extends React.Component{
        render(){
            return <Consumer>
                {
                    (name)=>
                        <div style={{border:'1px solid red','60%',margin:'20px auto',textAlign:'center'}}>
                            <p>孙子组件获取到的内容:{name}</p>
                        </div>
                    
                }
            </Consumer>
        }
    }


    function render(){
      ReactDOM.render(
        <ContextDemo/>,
        document.getElementById('root')
      );
    }

    render();
  • 相关阅读:
    c getline
    vim tips
    viksoe.dk UI: Become windowless
    用ls如何实现文件按时间排序查看,谢谢! AIX ChinaUnix.net
    垂直切分大小 : vertical res 30
    commandlinefu.com
    cmake 学习笔记(二) 1+1=2 博客频道 CSDN.NET
    implement split with c++
    分享:spdylay 0.3.8 发布,SDPY 的 C 语言实现
    培乐园《搜索相关性1》—在线播放—优酷网,视频高清在线观看
  • 原文地址:https://www.cnblogs.com/MDGE/p/13701326.html
Copyright © 2011-2022 走看看