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. Vue中错误图片的处理

    在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片, 在这里写了两种方法, 第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值. 第二种问题, ...

  2. SpringCloud番外篇-服务治理之Nacos

    一.Nacos概述 Nacos是阿里巴巴开源的服务注册中心,官方文档:https://nacos.io/zh-cn/docs/what-is-nacos.html 从个人使用体验上看,nacos要比e ...

  3. 中级前端必备知识点(2.5w+月薪)进阶 (分享知乎 : 平酱的填坑札记 关注专栏 用户:安大虎)

    前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自动化.语义化.封装......等概念熟练运用到工 ...

  4. 关于B/S模式CGI上传文件,遇到的问题归纳(待更新。。。)

    由于项目问题是基于web的,最近一直在改进web界面,由于产品需要升级,而且升级操作是由客户在web端完成,将软件包放在本地,由web上传到后台完成更新,之前做的是TFTP更新方式,但是需要借助第三方 ...

  5. [考试反思]1013csp-s模拟测试72:距离

    最近总是这个样子. 看上去排名好像还可以,但是实际上离上面的分差往往能到80分,但是身后的分差其实只有10/20分. 比上不足,比下也不怎么的. 所以虽然看起来没有出rank10,但是在总分排行榜上却 ...

  6. python私有变量的分类

  7. windows下如何安装Python虚拟环境

    1.前言 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv 这个工具,就可以构建一系列虚拟的Pyt ...

  8. Docker实战总结

    >>> 目录 <<< Docker简介 Docker优势 Docker基本概念 Docker安装使用 Docker常用命令 Docker镜像构建 Docker本地仓 ...

  9. 大数据之路day02_2--if switch while for

    在这一节,学习程序流程控制,具体包括判断结构.选择结构.循环结构. 1.判断结构(if.if-else) 三元运算符和if-else的区别 三元运算符,是一个运算符,所以运行必须有结果 而if-els ...

  10. K8S入门系列之集群二进制部署-->node篇(三)

    node节点组件 docker kubelet kube-proxy kubernetes-server-linux-amd64.tar.gz(相关的这里都能找到二进制文件!) falnnel 1. ...