zoukankan      html  css  js  c++  java
  • 如何使用Context

    一、Context

      Context 提供了一个无需为每层组件手动添加 props就能在组件树间进行数据传递的方法。

    二、设计目的

      Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。

    三、使用场景

      Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用,因为这会使得组件的复用性变差

    四、使用Context三步骤

      1、创建共享的Context

      官方API:https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext

    const MyContext = React.createContext(defaultValue);

      2、使用Provider提供创建的Context 的默认值值

      官方API:https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext

    <MyContext.Provider value={/* 某个值 */}>

      3、使用useContext获取Context的值

      官方API:https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext

    const value = useContext(MyContext);

    五、使用Context的栗子

      1、创建一个父组件,并创建共享Context

    import React from 'react';
    import ChildOne from './ChildOne';
    let countValue = {
      count1: 1,
      count2: 2,
    }
    //创建一个共享的context,并导出,供子组件使用
    export const CountValueContext = React.createContext(countValue);
    export default () => {
      return (
        // 使用 Provider 提供 CountValueContext 的值,Provider所包含的子树都可以直接访问CountValueContext的值
        <CountValueContext.Provider value={countValue}>
          <ChildOne />
        </CountValueContext.Provider>
      );
    }

      2、创建一个子组件,使用共享Context

    import React, { useContext } from 'react';
    import { CountValueContext } from './index'
    import ChildTwo from './ChildTwo';
    export default () => {
      //使用共享 Context
      const countValue: any = useContext(CountValueContext);
      return (
        <div>
          <p>第一个组件获取到的count值:{countValue.count1}</p>
          <ChildTwo />
        </div>
      );
    }

      3、在子组件中再创建一个子组件,使用共享Context

    import React, { useContext } from 'react';
    import { CountValueContext } from './index'
    export default () => {
      //使用共享 Context
      const countValue: any = useContext(CountValueContext);
      return (
        <div>
          <p>第二个组件获取到的count值:{countValue.count2}</p>
        </div>
      );
    }

      4、结果如下

      

      通过context,能在不同的组件拿到countValue不同的值。

  • 相关阅读:
    获取数据窗口的report对象 pb
    职业中的人与人。。。
    关于表格的设置
    今天学到的关于UI的一点东西
    给QQ发匿名消息
    这两天在改以前写的程序,很闷,记点流水账,:)
    我也要回家了,给大家道别
    时间过的好快啊,2月1号了,几个问题!
    开始新的一年的新生活..
    @dudu,临走问一下
  • 原文地址:https://www.cnblogs.com/minorf/p/12980774.html
Copyright © 2011-2022 走看看