React：Context 使用

最新推荐文章于 2024-02-23 15:45:37 发布

VIP文章林夏天

最新推荐文章于 2024-02-23 15:45:37 发布

阅读量383

点赞数 1

分类专栏： React 学习笔记文章标签： react javascript 前端

本文链接：https://blog.csdn.net/weixin_46124214/article/details/108102826

版权

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行跨层级数据传递的方法，它设计目的就是为了共享那些对于一个组件树而言是“全局”的数据

一. 式例1

1. 目录结构

在这里插入图片描述

2. 基本使用

global.js：

import React from "react";
export const globalData = {
   
    a: 1
}
export const globalContext = React.createContext(globalData);

/public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
    <style>
      .app {
    
        border: 1px solid red;
        padding: 30px
      }
      .father {
    
        border: 1px solid blue;
        padding: 30px
      }
      .son {
    
        border: 1px solid pink;
        padding: 30px   
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

App.js：

import React, {
    Component }</

最低0.47元/天解锁文章

林夏天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React：Context 使用

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行跨层级数据传递的方法，它设计目的就是为了共享那些对于一个组件树而言是“全局”的数据一. 式例11. 目录结构2. 基本使用global.js：import React from "react";export const globalData = { a: 1}export const globalContext = React.createContext(globalData);/public/in
复制链接

扫一扫