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();
  • 相关阅读:
    Python正课101 —— 前端 入门
    Python正课100 —— 数据库 进阶5
    Python正课99 —— 数据库 进阶4
    Navicat15安装教程
    Python正课98 —— 数据库 进阶3
    Python正课97 —— 数据库 进阶2
    Python正课96 —— 数据库 进阶1
    解决:MySQL报错
    Python正课95 —— 数据库 入门
    作业3
  • 原文地址:https://www.cnblogs.com/MDGE/p/13701326.html
Copyright © 2011-2022 走看看