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();
  • 相关阅读:
    kali长时间未使用导致数字签名过期无法更新源解决办法
    4.爬虫去重策略
    3.编码问题
    kalinux 五笔安装
    ★★★kalinux 常用命令
    安装vm tools时出现如下问题 The path "/usr/bin/gcc" is not valid path to the
    kalinux实现自适用全屏、与物理主机共享文件方法
    wifi pj WiFiPhisher 安装使用
    条款20:在传递对象的时候尽量用reference-to-constent来代替,pass-by-value
    条款19:定义class就相当于定义一个个的内置类型
  • 原文地址:https://www.cnblogs.com/MDGE/p/13701326.html
Copyright © 2011-2022 走看看