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();
  • 相关阅读:
    用ssh整合时,用sessionfactory的getCurrentSession()获取不到session
    layim+signalr2.0+mongodb在线轻聊版解决方案(可提供演示)
    (绿色)修正版gooflow流程解决方案(源码分享+在线演示+UI地址下载)
    一个开源的可视化的jQuery工作流插件
    自定义流程gooflow.08 demo在线演示
    asp.net mvc 系统操作日志设计
    第三方系统平台如何对接gooflow2.0
    一个供新手把玩的jQueryUI在线文档
    Ninject 自动注册
    JQuery.imgAreaSelect 参数说明
  • 原文地址:https://www.cnblogs.com/MDGE/p/13701326.html
Copyright © 2011-2022 走看看