精华内容
下载资源
问答
  • React Context

    2021-03-11 13:56:41
    React Context如何使用Context 如何使用Context context api给出三个概念:React.createContext()、Provider、Consumer; React.createContext() 这个方法用来创建context对象,并包含Provider、Consumer两个组件 &...

    React Context

    如何使用Context

    context api给出三个概念:React.createContext()、Provider、Consumer;

    React.createContext()

    这个方法用来创建context对象,并包含Provider、Consumer两个组件 <Provider />、<Consumer />
    
    const {Provider, Consumer} = React.createContext();
    

    Provider

    数据的生产者,通过value属性接收存储的公共状态,来传递给子组件或后代组件
    	eg:
    	<Provider value={/* some value */}>
    

    Consumer

    数据的消费者,通过订阅Provider传入的context的值,来实时更新当前组件的状态
    eg:
    <Consumer>
      {value => /* render something based on the context value */}
    </Consumer>
    

    使用方法

    App.js

    import React from 'react'
    import Son from './son.js'
    import './App.css';
    
    export const {Provider,Consumer}  = React.createContext('默认名称');
    
    function App() {
      let name = '小孩子';
      return (
        <Provider value={name}>
          <div style={{border:'1px solid red'}}>
            <p>父组件定义的: {name}</p>
            <Son/>
          </div>
        </Provider>
      );
    }
    
    export default App;
    

    son.js

    import React from 'react'
    import {Consumer} from './App'
    import GrandSon from './grandSon'
    function Son (props){ 
      return (
          <Consumer>
            {
              (name)=>
                <div>
                  子组件: {name}
                  <GrandSon/>
                </div>
            }
          </Consumer>
        )
        
    }
    
    export default Son
    

    grandSon.js

    import React from 'react'
    import {Consumer} from './App'
    function GrandSon (){
      return (
      //消费使用
        <Consumer>
          {(name)=>
            <div>
              这个是孙组件: {name}
            </div>
    
          }
        </Consumer>
      )
    }
    
    export default GrandSon
    

    组件最终显示结果
    在这里插入图片描述

    展开全文
  • react Context

    2020-07-22 21:11:16
    创建一个Context import React from 'react'; //创建一个默认值为light的Context const theme = React.createContext("light"); export default theme; 使用Context import React from 'react'; import ReactDOM ...

    创建一个Context

    import React from 'react';
    //创建一个默认值为light的Context
    const theme = React.createContext("light");
    
    export default theme;
    

    使用Context

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import Theme from "./theme"
    
    ReactDOM.render(
        //设置Context的值为“dark”
        <Theme.Provider value={"dark"}>
            <React.StrictMode>
                <App/>
            </React.StrictMode>
        </Theme.Provider>,
      document.getElementById('root')
    );
    
    ```javascript
    import React from 'react';
    import Theme from "./theme"
    export default class Card extends React.Component {
        //必须存在不然this.context取不到Context的值,并且如果上面
        //<Theme.Provider value={"dark"}>没有设置value={"dark"},
        //this.context也是没有值得
        static contextType = Theme;
        render() {
            return <div className={"white"}>{this.context}</div>
        }
    }
    
    
    
    //另一种用法
    export default class Card extends React.Component {
         //此用法适用于多个Context的情况<Theme.Consumer>用于订阅Context的值
         render() {
            return <Theme.Consumer>
                {context => <div className={"white"}>{context}</div>}
            </Theme.Consumer>
        }
    }
    

    Context默认值

    如果使用Context的组件包含在<Theme.Provider>中,那么Context只能是<Theme.Provider>上设置的默认值或者没有值,那我们设置的默认值呢?

    //如果在我们使用的组件外层没有包裹<Theme.Provider>,那么Context使用的就是我们创建时的默认值
    ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
      document.getElementById('root')
    );
    
    展开全文
  • react context

    2021-03-04 15:34:33
    context 直接上代码 import React, { useState , createContext } from 'react'; //===关键代码 const CountContext = createContext() function Example4(){ const [ count , setCount ] = useState(0); return...

    context

    直接上代码
    声明context文件

    theme-context.js
    
    import React from 'react'
    
    export const themes = {
        light: {
          foreground: '#000000',
          background: '#eeeeee',
        },
        dark: {
          foreground: '#ffffff',
          background: '#222222',
        },
      };
      
      export const ThemeContext = React.createContext(
        themes.dark // 默认值
      );
    

    存储context:

    父组件
    import react from 'react'
    import {ThemeContext, themes} from './theme-context';
    import Button from './button'
    class model1 extends react.Component{
        constructor(props){
            super(props)
            this.state = {
                theme:themes.dark
            }
        }
        render(){
            return (
                <div>
                    <ThemeContext.Provider value={this.state.theme}>
                        <Button></Button>
                    </ThemeContext.Provider>
                </div>
            )
        }
    }
    export default model1
    

    取context 时要指定组件的contexttype为哪一个context:

    子组件
    import {ThemeContext} from './theme-context';
    import React from 'react'
    
    class Button extends React.Component {
      render() {
        let props = this.props;
        let theme = this.context;
        return (
          <button
            {...props}
            style={{backgroundColor: theme.background}}
          />
        );
      }
    }
    Button.contextType = ThemeContext;
    
    export default Button;
    
    展开全文
  • React context

    2015-06-05 06:27:28
    介绍 Contexts 是React的一个重要属性,但是到目前为止,这个属性在正式的文档里面还没有对它进行正式介绍,在 ...React.withContext 会执行一个指定的上下文信息的回调函数,任何在这个回调函数里面渲染的组件都...

    介绍

    Contexts 是React的一个重要属性,但是到目前为止,这个属性在正式的文档里面还没有对它进行正式介绍,在 reactv0.1.4将会正式发布这个属性。下面先来介绍一下它的使用方式。

    React.withContext

    React.withContext 会执行一个指定的上下文信息的回调函数,任何在这个回调函数里面渲染的组件都有这个context的访问权限。

    var A = React.createClass({
    
        contextTypes: {
            name: React.PropTypes.string.isRequired,
        },
    
        render: function() {
            return <div>My name is: {this.context.name}</div>;
        }
    });
    
    React.withContext({'name': 'Jonas'}, function () {
        // Outputs: "My name is: Jonas"
        React.render(<A />, document.body);
    });

    任何想访问context里面的属性的组件都必须显式的指定一个contextTypes 的属性。如果没有指定改属性,那么组件通过 this.context 访问属性将会出错。

    如果你为一个组件指定了context,那么这个组件的子组件只要定义了contextTypes 属性,就可以访问到父组件指定的context了。

    var A = React.createClass({
    
        render: function() {
             return <B />;
        }
    });
    
    var B = React.createClass({
    
        contextTypes: {
            name: React.PropTypes.string
        },
    
        render: function() {
            return <div>My name is: {this.context.name}</div>;
        }
    });
    
    React.withContext({'name': 'Jonas'}, function () {
       React.render(<A />, document.body);
    });

    为了减少文件的引用,你可以为contextTypes 放到一个minx 中,这样 用到的组件引用这个 minx 就行了。

    var ContextMixin = {
        contextTypes: {
            name: React.PropTypes.string.isRequired
        },
    
        getName: function() {
            return this.context.name;
        }
    };
    
    var A = React.createClass({
    
        mixins: [ContextMixin],
    
        render: function() {
             return <div>My name is {this.getName()}</div>;
        }
    });
    
    React.withContext({'name': 'Jonas'}, function () {
        // Outputs: "My name is: Jonas"
        React.render(<A />, document.body);
    });

    getChildContext

    和访问context 的属性是需要通过 contextTypes 指定可访问的 元素一样。getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定,不然会产生错误。

    // This code *does NOT work* becasue of a missing property from childContextTypes
    var A = React.createClass({
    
        childContextTypes: {
             // fruit is not specified, and so it will not be sent to the children of A
             name: React.PropTypes.string.isRequired
        },
    
        getChildContext: function() {
             return {
                 name: "Jonas",
                 fruit: "Banana"
             };
        },
    
        render: function() {
             return <B />;
        }
    });
    
    var B = React.createClass({
    
        contextTypes: {
            fruit: React.PropTypes.string.isRequired
        },
    
        render: function() {
            return <div>My favorite fruit is: {this.context.fruit}</div>;
        }
    });
    
    
    // Errors: Invariant Violation: A.getChildContext(): key "fruit" is not defined in childContextTypes.
    React.render(<A />, document.body);

    假设你的应用程序有多层的context。通过withContextgetChildContext 指定的context元素都可以被子组件引用。但是子组件是需要通过 contextTypes 来指定所需要的context 元素的。

    var A = React.createClass({
    
        childContextTypes: {
             fruit: React.PropTypes.string.isRequired
        },
    
        getChildContext: function() {
             return { fruit: "Banana" };
        },
    
        render: function() {
             return <B />;
        }
    });
    
    var B = React.createClass({
    
        contextTypes: {
            name: React.PropTypes.string.isRequired,
            fruit: React.PropTypes.string.isRequired
        },
    
        render: function() {
            return <div>My name is: {this.context.name} and my favorite fruit is: {this.context.fruit}</div>;
        }
    });
    
    React.withContext({'name': 'Jonas'}, function () {
        // Outputs: "My name is: Jonas and my favorite fruit is: Banana"
        React.render(<A />, document.body);
    });

    context 是就近引用的,如果你通过withContext 指定了context元素,然后又通过 getChildContext 指定了该元素,该元素的值将会被覆盖。

    var A = React.createClass({
    
        childContextTypes: {
             name: React.PropTypes.string.isRequired
        },
    
        getChildContext: function() {
             return { name: "Sally" };
        },
    
        render: function() {
             return <B />;
        }
    });
    
    var B = React.createClass({
    
        contextTypes: {
            name: React.PropTypes.string.isRequired
        },
    
        render: function() {
            return <div>My name is: {this.context.name}</div>;
        }
    });
    
    React.withContext({'name': 'Jonas'}, function () {
        // Outputs: "My name is: Sally"
        React.render(<A />, document.body);
    });

    总结

    通过context传递属性的方式可以大量减少 通过显式的通过 props 逐层传递属性的方式。这样可以减少组件之间的直接依赖关系。

    展开全文
  • React Router + React Context API 关于 由ReactReact Router和新的ReactContext API支持的电子商务的基本结构。 用法 $ npm i $ npm start 上面的说明将在端口1234上创建活动服务器。
  • React Context DevTool是用于React Context和useReducer API的调试工具。 您可以轻松地在不同的视图(例如树视图,原始视图和差异视图)中显示上下文值的变化。 现在,Devtool支持useReducer API。 轻松调试状态更改...
  • React上下文多语言 这是带有React Context API的多语言网站的示例架构和实现 请阅读以下文章之一以获取详细说明: 这是演示站点:
  • React State Context:使用React Context的轻量级状态管理
  • 主要介绍了使用react context 实现vue插槽slot功能,文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下
  • React Context基本用法

    2021-03-05 10:50:48
    React Context基本用法Context简介与前言简单的理解简单的逻辑最简代码演示`./theme.ts``index.tsx`(页面)`BigComp.tsx` // 外层组件`SmallComp.tsx` // 内层组件API(参考[官网文档]...Context 简介与前言 ...
  • path:packages/react/src/ReactContext.js 源码 import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols'; import type {ReactContext} from 'shared/ReactTypes'; import ...
  • 在上一篇 对于 Custom React Hooks 一些思考 文章末尾提及了 React Context,那么在本篇中我们将了解一下 React Context 怎么解决状态共享问题以及一些其它想法。 关于 React Context 提供 官网对于 usecontext 的...
  • 使用React Context API在React中控制表单的简单方法入门使用npm安装npm install --save formcat使用yarn yarn add formcat如何使用首先,我们需要一种在React中控制表单的简单方法使用React Context API入门使用npm...
  • 使用新的React Context API的简单React Counter示例。 要求 为了进行开发,您只需要在您的环境中安装Node.js。 安装 $ git clone https://github.com/mrtins/react-context-counter-example.git $ cd react-context...
  • React context基本用法

    2019-03-21 15:45:00
    React context基本用法 Reactcontext就是一个全局变量,可以从根组件跨级别在React的组件中传递。React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的context。 1.老版本...
  • 什么是React Context API

    2020-08-26 02:29:16
    Taking a deeper dive into React Context API and how it differs from redux 更深入地了解React Context API及其与Redux的区别 This past week, I wanted to dive into newer technologies in React, study them ...
  • 如何有效地使用React Context。 创建一个购物车。 :fishing_pole: 先决条件 代码编辑器( ) 入门 克隆存储库,然后切换到包含最小资产才能启动的已started分支。 git clone ...
  • React Context API 学习笔记 创建Context Provider Context provides a way to pass data through the component tree without having to pass props down manually at every level. 基本概念 - React....
  • 关于react Context的理解

    2021-03-12 14:43:09
    关于react Context的理解 react中Contex设计的目的是为了创建在组件树中能够共享的数据,子组件获取父组件数据无需通过props的层层传递 // react创建Context,通过createContext方法创建context对象,方法中参数为...
  • - React Context演示。 State-使用上下文API的React状态,类似于使用connect , Provider API的redux。 图书馆 context-建议的React上下文API的Polyfill。 -React新的上下文API的小帮手。 将状态更改可靠地传达...
  • 使用React Context的轻量级状态管理。 :check_mark: 建立在React原语之上 :check_mark: 提供熟悉的API :check_mark: 设计时要考虑最小的学习曲线 :check_mark: 合理的文件大小(压缩后〜2kb) 动机 当您开始使用...
  • Aplicacióncreada con React Hooks和React Context Crea una tarea 塔迪亚(Edita la tarea) Elimina la tarea Guarda las tareas本地存储
  • ReactNative ReactContext#getCurrentActivity解析 ReactNative与原生混合开发时,原生经常需要为ReactNative提供组件。提供组件时getCurrentActivity使用不当容易造成NullPointerException。 以下是一个简单的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,801
精华内容 11,120
关键字:

reactcontext