zoukankan      html  css  js  c++  java
  • React中context的使用方法

    React中context的使用方法

    App.js文件

    // 引入React
    import React, {Component} from 'react';
    // 引入样式
    import './App.css';
    
    /*
    * 详细说明:定义了三个组件:分别为App/AppChild/AppChildChild
    * 组件关系:App -> AppChild 父子; App -> AppChildChild 祖;AppChild -> AppChildChild 父子;
    * 通过下面案例你将领略context的使用方法
    * 使用方法总结:
    * 1.先创建一个Context容器对象,可以进行结构Provider及Consumer方便之后的简单应用。
    * 2.包裹要用的组件,给谁用就在谁的外面包裹,使用属性关键字value进行传值,value不可改变。
    * 3.在哪里使用就在哪里声明,static contextType = 容器对象名字;
    * 4.使用this.content获取
    * 注意上述方法只限于类式组件,如果你使用的是函数式组件,那么你应该用下面的方式去做
    * <Consumer>
    *   {
    *        value => {
    *
    *        }
    *    }
    * </Consumer>
    ***/
    
    // 创建一个Context容器对象,注意开头大写
    const MyContext = React.createContext()
    // 拿出Provider及Consumer
    const {Provider, Consumer} = MyContext;
    
    // 定义一个祖组件
    class App extends Component {
        state = {
            username: 'Tom',
            age: 20
        }
        render() {
            const {username, age} = this.state;
            return (
                <div className="App">
                    <h3>我是App组件</h3>
                    <h4>我的名字:{username}</h4>
                    {/*利用props给子组件AppChild传值*/}
                    {/*给谁用就用Provider包裹*/}
                    {/*<Provider value={username}>
                        <AppChild username={username}/>
                    </Provider>*/}
                    <Provider value={{username, age}}>
                        <AppChild username={username}/>
                    </Provider>
                </div>
            );
        }
    }
    
    // 父级组件
    class AppChild extends Component {
        render() {
            const {username} = this.props;
            return (
                <div className="AppChild">
                    <h3>我是AppChild组件</h3>
                    <h4>我接收来自App组件的名字是:{username}</h4>
                    <AppChildChild/>
                </div>
            );
        }
    }
    
    // 子组件-类式生命
    /*class AppChildChild extends Component {
        // 声明context
        static contextType = MyContext;
        render() {
            const {username, age} = this.context;
            return (
                <div className="AppChildChild">
                    <h3>我是AppChildChild组件</h3>
                    <h4>我接收来自App组件的名字是:{username},年龄:{age}</h4>
                </div>
            );
        }
    }*/
    // 子组件-函数式声明
    function AppChildChild() {
        return (
            <div className="AppChildChild">
                <h3>我是AppChildChild组件</h3>
                <h4>
                    <Consumer>
                        {
                            value => {
                                return `我接收来自App组件的名字是:${value.username},年龄:${value.age}`
                            }
                        }
                    </Consumer>
                </h4>
            </div>
        )
    }
    
    export default App;

    App.css文件

    .App {
      background-color: blue;
      font-size: 20px;
      padding: 10px;
      color: #ffffff;
    }
    .AppChild {
      background-color: orange;
      font-size: 20px;
      padding: 10px;
      color: #ffffff;
    }
    .AppChildChild {
      background-color: red;
      font-size: 20px;
      padding: 10px;
      color: #ffffff;
    }
  • 相关阅读:
    Codeforces Round #192 (Div. 2)
    STL删除vector或list的方法及注意的问题
    HDU 4614 (13年多校第二场1004)裸线段树
    将汇编的指令画在图片上==可以贴图法操作==动动图片图案指示就行了。(堆积木编译器)
    MySQL Connector/Python 安装、测试
    crtmpserver的架构简介
    hi3531的i2c部分 分类: HI3531 2014-03-18 14:41 948人阅读 评论(0) 收藏
    bootrom的构成 分类: vxWorks 2014-03-14 08:48 315人阅读 评论(0) 收藏
    bootrom脚本的创建 分类: vxWorks 2014-03-14 08:47 307人阅读 评论(0) 收藏
    ROM型启动方式概述 分类: vxWorks 2014-03-14 08:47 297人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/shangguancn/p/14957401.html
Copyright © 2011-2022 走看看