context是什么

Props属性是由上到下单向传递的

context提供了在组件中共享此类值的方法

context使用

设计目的是共享哪些对于组件来说全局的数据

不要因为仅仅为了避免在几个层级下的组件传递props而使用context

context用法

1.先创建一个theme-context.js

 import React from 'react'

 const ThemeContext = React.createContext()

 export default ThemeContext

2.在组件app.js里面引用

 import React, { Component } from 'react';
import './App.css';
import ThemeContext from './theme-context'
import ThemeBar from './components/ThemeBar'
const themes = {
light: {
className: 'btn btn-prime',
bgColor: '#f00',
color: '#fff'
},
dark: {
className: 'btn btn-dark',
bgColor: '#ff0',
color: '#000'
}
} class App extends Component {
render() {
return (
<ThemeContext.Provider value={themes.light}>
<div>
<ThemeBar/>
</div>
</ThemeContext.Provider>
);
}
} export default App;

3.创建ThemeBar组件

 import React from 'react'
import ThemeContext from '../theme-context' const ThemeBar = () => {
return (
<ThemeContext.Consumer>
{
theme => {
console.log(theme)
}
}
</ThemeContext.Consumer>
)
} export default ThemeBar

在组件里面打印传递下来的theme就可以在控制台看见传递下来的数据了

react之context的更多相关文章

  1. 手写一个React-Redux,玩转React的Context API

    上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...

  2. React Hooks & Context API

    React Hooks & Context API responsive website https://reactjs.org/docs/hooks-reference.html https ...

  3. 【react】---context的基本使用新版---【巷子】

    一.全局定义context对象 globalContext.js import React from "react"; const GlobalContext = React.cr ...

  4. 【react】---context的基本使用---【巷子】

    一.context的理解 很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的stor ...

  5. React 新 Context API 在前端状态管理的实践

    本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...

  6. React 中 context 的使用

    官方文档说明(英) 看了别人写的中文博客,再看了官方英文文档,发现还是官方文档讲的浅显易懂一些,看了之后,半翻译半理解地写了这篇博客,更易于新手理解. 介绍 context 是在 react @ 0. ...

  7. 简单整理React的Context API

    之前做项目时经常会遇到某个组件需要传递方法或者数据到其内部的某个子组件,中间跨越了甚至三四层组件,必须层层传递,一不小心哪层组件忘记传递下去了就不行.然而我们的项目其实并没有那么复杂,所以也没有使用r ...

  8. React的Context的使用方法简介

    context 定义: Context提供了一种方式,能够让数据在组件树中传递,而不必一级一级手动传递. API : createContext(defaultValue?). 使用方法: 首先要引入 ...

  9. React手稿 - Context

    Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...

随机推荐

  1. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  2. 明解C语言 入门篇 第二章答案

    练习2-1 #include <stdio.h> int main() { int x; int y; int percent; puts("请输入两个整数"); pr ...

  3. netcat的使用

    1,端口扫描 端口扫描经常被系统管理员和黑客用来发现在一些机器上开放的端口,帮助他们识别系统中的漏洞. $nc -z -v -n 172.31.100.7 21-25 可以运行在TCP或者UDP模式, ...

  4. 哟,来看看JS里面变量声明方式

    点点点点点点进来.点击此处领取双十一梦想大礼包. 终于被我忽悠进来了?老弟,不骚一下你不往里面点是吧,还想大礼包?想着吧. 今天要说的如题,JS里面变量声明方式.可能一提到这个话题大家能很快的打出来, ...

  5. 接口自动化、移动端、web端自动化如何做?

    1.<Python+Appium移动端自动化项目实战>-带您进入APP自动化测试的世界https://yuedu.baidu.com/ebook/765b38a5690203d8ce2f0 ...

  6. Nginx使用反向代理实现负载均衡

    Nginx使用反向代理实现负载均衡 yls 2019-9-20 简介 基于docker容器以及docker-compose,所以需要自学docker在linux环境的基本使用 使用两个tomcat作为 ...

  7. Mysql主从同步的实现原理与配置实战

    1.什么是mysql主从同步? 当master(主)库的数据发生变化的时候,变化会实时的同步到slave(从)库. 2.主从同步有什么好处? 水平扩展数据库的负载能力. 容错,高可用.Failover ...

  8. javascript jquery 修改指定标签中的内容

    javascript jquery 修改指定标签中的内容 $("#test1").text("Hello world!"); document.getEleme ...

  9. 理解Spark SQL(二)—— SQLContext和HiveContext

    使用Spark SQL,除了使用之前介绍的方法,实际上还可以使用SQLContext或者HiveContext通过编程的方式实现.前者支持SQL语法解析器(SQL-92语法),后者支持SQL语法解析器 ...

  10. ACE框架 基于共享内存的分配器

    ACE框架提供了一个内存分配器模板,并且提供了(仅且)一个模板实例,基于共存内存的内存分配器.这个共存内存分配器模板实例在ACE框架应用于,基于内存映射的进程通讯,以及进程间同步等. ACE内存分配器 ...