React context以更改组件
的状态，而不需要通过props进行传递。它提供了一种在组件树中共享数据的方式，使得数据的传递更加简洁和高效。
React context是React框架中的一个特性，用于解决组件之间共享数据的问题。它通过创建一个上下文对象，将数据传递给组件树中的所有子组件，而不需要通过props逐层传递。这样可以避免props层层传递的繁琐和冗余。
React context的主要优势包括：
- 简化数据传递：使用context可以将数据直接传递给需要的组件，而不需要通过props一层层传递，减少了代码的复杂性和冗余。
- 提高组件的可复用性：通过将数据传递给context，可以使得组件更加独立和可复用，不再依赖于特定的数据传递方式。
- 提升性能：由于context的数据传递是直接的，而不需要经过props的传递，可以减少组件之间的数据传递和更新的开销，提高应用的性能。
React context的应用场景包括：
- 主题切换：通过将主题数据传递给context，可以实现整个应用的主题切换功能，而不需要手动传递给每个组件。
- 用户认证：将用户认证状态传递给context，可以在整个应用中共享用户认证状态，方便进行权限控制和用户信息展示。
- 多语言支持：通过将当前语言信息传递给context，可以实现应用的多语言支持，方便在不同组件中根据语言进行文本切换。
腾讯云相关产品中，与React context相对应的是腾讯云的Serverless云函数（SCF）和云开发（CloudBase）服务。Serverless云函数是一种无服务器计算服务，可以实现按需运行的函数计算，可以作为后端逻辑的处理方式。云开发是一种全栈云原生开发平台，提供了前后端一体化的开发能力，可以方便地进行数据存储、云函数调用等操作。
更多关于腾讯云Serverless云函数和云开发的信息，请参考以下链接：
相关·内容
1回答
我已经创建了一个反应本地应用程序与反应本地CLI。App.tsx有以下内容：
import React from "react";
import {
StyleSheet,
Text,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const App = () => {
return (
<SafeAreaView>
<Text>Hello React<
浏览 0提问于2021-09-11得票数 0
1回答
我正在处理函数组件和类组件的混合。每次在NavBar中单击时，我都希望触发函数来验证表单，它有5个表单，因此每次我都必须在上下文API中设置一个新函数。
Context.js
import React, { createContext, useContext, useState } from "react";
const NavigationContext = createContext({});
const NavigationProvider = ({ children }) => {
const [valid, setValid] = useState(fa
浏览 1提问于2021-06-14得票数 0
我的盖茨比网站的header.js包含一个简单的导航标志和链接。如果About页面是活动的：
链接文本应从“约”改为“结束”。
链接网址应从"/about“改为"/”
请参阅下面的header.js代码：
import React, { useState } from "react"
import { Link } from "gatsby"
export default function Header() {
const [aboutLink, setAboutLink] = useState({
title: &
浏览 2提问于2021-02-18得票数 1
我在我的应用程序中使用了react路由器，我正在寻找一种方法来阻止已经在DOM中的组件的重装。例如，如果我在URL dashboard，那么我将安装一个相关的DashboardComponent。当我转换到dashboard/settings时，我的DashboardComponent和SettingsComponent被重新装入DOM中。我想找到一种干净的方式，只挂载当前URL的子地址。这个可以定位吗？
路由器：
import { Component, createFactory, PropTypes } from 'react'
import { Route, RouteH
浏览 0提问于2015-08-04得票数 11
回答已采纳
2回答
React没有捕获道具，无论是prevProps还是nextProps，组件呈现得都很好。医生说
如果您的函数组件在相同的支持下呈现相同的结果，则可以将其封装在对React.memo的调用中，以提高性能。
我的问题是使用react停止两次渲染，但memo似乎不起作用，组件使用相同的道具呈现两次。
当在Create New Event上单击/events时，组件呈现
。
位于/components/Event/CreateEvent/CreateEvent.js的子组件
父组件位于触发子组件的/Pages/Event/Event.js行号999‘处。
以下是守则：
i
浏览 6提问于2020-06-09得票数 0
回答已采纳
3回答
通过道具中的Redux商店
、、、、
我正在做一个大学实践，使用React和Redux构建一个应用程序。当我使用Yarn启动服务器时，会得到以下错误：
Passing redux store in props has been removed and does not do anything.
To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider a
浏览 0提问于2018-12-07得票数 6
回答已采纳
1回答
当我运行这个应用程序时，错误消息显示TypeError: undefined is not an object (evaluating '_useContext.state')
这是我的App.js：
import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { useState, useEffect, useContext } from 'react';
import { StyleSheet, Text, View } from
浏览 3提问于2022-11-22得票数 0
回答已采纳
我使用一个带有useEffect钩子的React useEffect在我的最外层组件中设置一个变量，这个组件包装了我的整个应用程序。在我的应用程序中的一个子组件上，我使用history.push('/')路由回根。这使得而不是似乎触发了对我的上下文变量的更新。这是意料之中吗？如果是的话，是否有更好的路由方式来更新我的上下文变量？
我正在使用react 16.14.0 & react-router-dom 5.2.0。
例如，下面的代码。不应该在var上增加history.push('/')
Context.js
const Context= React.
浏览 3提问于2021-03-30得票数 1
回答已采纳
2回答
我在React中创建了一个计数器应用程序，使用上下文api进行全局状态管理。
但问题是，当我单击“增加和减少”按钮时，它没有更新全局值。
我是新的反应，请提供指导，在这里是错误的。
ContextFile：
import {createContext,useState} from 'react';
export const DataContext = createContext({
data:0,
increase : () => {},
decrease : () => {}
});
function DataContextProvid
浏览 3提问于2022-09-26得票数 1
回答已采纳
2回答
我是Redux新手，这样做的正确方法是什么
我知道我应该使用中间层，但我不是很清楚这个概念
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import environment from '../../commons/enviroment.const';
import Loader fro
浏览 0提问于2020-04-10得票数 1
2回答
我需要将我的JSX组件(FC)映射到一个对象中，以便进行动态呈现。这就是我到目前为止想出的：
对象的接口
interface Mappings {
EC2: {
component: React.FC<{}>;
name: string;
description: string;
};
}
export enum ResourcesEnum {
EC2 = 'EC2',
S3 = 'S3',
}
在同一个文件中定义的映射对象：
错误消息：
Type 'Element' is
浏览 5提问于2021-04-04得票数 0
回答已采纳
2回答
在使用时避免更改
、、
我使用上下文来表示各个组件的状态，在本例中，选中了哪个复选框，并使用该组件来更改该组件状态。但是，通过只单击一个复选框，所有四个组件(复选框)都会重发。在链接到和变异上下文时，我如何防止这种重命名？谢谢。
index.tsx:
import * as React from "react";
import ReactDOM from "react-dom";
import { ContextProvider, useMyContext } from "./context";
import "./styles.css";
cons
浏览 1提问于2020-06-04得票数 0
回答已采纳
1回答
我是新来的。在我到目前为止发现的示例中，使用创建自己的上下文对象并将其作为值传递给提供程序等。所有示例似乎都将整个上下文(作为一个对象或其各个部分的总和)存储在状态中，并将其用于请求。但是物体的寿命是多少呢？它是仅在页面刷新期间创建一次，还是在每个呈现周期中重新创建，从而只能通过useState或useRef生存？换句话说，实际上需要useState来存储呈现周期之间的上下文数据，还是useState仅用作订阅更改的一种方式？
这就是我根据我见过的教程创建上下文的方式.
(要明确的是，我的问题是关于context.js中的“context.js”对象的生存期，以及重命名器或状态更改或其他生命周
浏览 3提问于2022-10-27得票数 1
回答已采纳
我正在使用并收到以下警告：
Warning: WithContext(...): React component classes must extend React.Component.
Warning: WithStyles(...): React component classes must extend React.Component.
这些文件看起来如下：
// withContext.js
import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
import emp
浏览 5提问于2015-09-12得票数 1
回答已采纳
2回答
export function TodosContextProvider( {children}: {children: React.ReactNode}, props: any) {
const [todos, dispatch] = React.useReducer(todosReducer, [
{
Id: 1,
Title: 'Learn Context API',
Done: true
},
{
Id: 2,
Title: 'Lear
浏览 3提问于2020-02-28得票数 0
回答已采纳
我正在使用来自的钩子，它不适用于我，当我的组件重新呈现时，状态会被重置，不确定为什么会发生，需要帮助。
下面是useContextState钩子的代码
import React from 'react';
const Context = React.createContext([{}, () => {}]);
const Provider = ({ children }) => {
const state = React.useState({});
return <Context.Provider value={state}>{childre
浏览 9提问于2022-09-15得票数 0
1回答
我想用反应来建立我的网站。我了解到用大写字母命名功能组件是一种很好的做法，但表示组件的名称应该以小写字母开头。我试着遵循这个规则，但是当我将任何钩子导入到以小写开头的表示组件时，React说“编译失败”。下面是消息行10:26: React "useContext“在函数"newCoring”中被调用，它既不是React函数组件，也不是自定义React函数--钩子/规则--钩子--我知道重命名组件会有帮助，但仍然想知道为什么在不使用React时用这种方式命名表示组件是“一个很好的实践”？这是我的组成部分：
import React, {useContext} fro
浏览 11提问于2020-09-13得票数 0
回答已采纳
这是我的主要部分类，所有到链接的路线都保留在这里。
export default class Section extends React.Component {
render() {
return (
<div style={{backgroundColor:"white"}}>
<Routes>
<Route path="/" element={<Home/>} />
浏览 5提问于2020-11-11得票数 32
回答已采纳
目前，我有一个复选框列表，onChange将向服务器请求返回一些数据。但是，当用户在一段时间后停止选中多选项框时，我使用lodash去弹出来尝试并发出请求。
目前，它阻止直接调度，但将在去抖动时间满足后调度，而不是当用户停止与复选框交互时调度。谁能告诉我我将如何实现这一点，或者我哪里错了？
谢谢!
import React, { useContext, useState, useEffect } from 'react';
import { Context } from '../../pages/search-and-results/search-and-resul
浏览 13提问于2020-06-05得票数 2
1回答
我正在尝试测试我的组件，它正在通过HOC使用上下文中的数据。
下面是安装程序:模拟上下文模块/context/__mocks__
const context = { navOpen: false, toggleNav: jest.fn() }
export const AppContext = ({
Consumer(props) {
return props.children(context)
}
})
高等OrderComponent /context/withAppContext
import React from 'react'
im
浏览 1提问于2018-12-04得票数 1
回答已采纳
2回答
我可能误解了一般情况下对环境的反应，但我认为应该这样做：
我有一个主应用程序，它的上下文提供程序如下所示
export default function app(){
return <contextObj.Provider value={Complex Object with multiple properties...}>
<Main/>
</contextObj.Provider>
}
我的主要应用程序如下
export default function main(){
//Have imported the context
浏览 1提问于2020-08-28得票数 0
回答已采纳
1回答
我试图检测用户何时按下我编写的自定义UI组件(它显示视频提要)。我尝试过使用所有可触摸的组件，理想情况下，我希望使用TouchableWithoutFeedback组件，但没有一个组件检测到我的组件上的按压。此外，当我使用检查器选择我的组件时，我会得到错误的Expected to find at least one React renderer，但我不知道如何正确地设置组件以获得一个呈现器。
本机UI组件：
public class DroneVideoFeedManager extends SimpleViewManager<DroneVideoFeed> {
@Overr
浏览 5提问于2018-08-20得票数 0
回答已采纳
我正在使用useContext反应钩。
Age.js
import React, { useContext } from 'react' ;
import Detail from '../context/detail';
const age = props =>{
const detail = useContext(Detail);
return(
<p>
Your age is : {detail.age}
</p>
);
}
export def
浏览 1提问于2020-02-03得票数 13
回答已采纳
我想知道如何将JSX (如"div“或"span")传递给我自己的组件。因此，我尝试使用React.ReactType来支持两者。我的代码如下所示：
LazySvgIcon.tsx
import * as React from 'react'
interface Props {
src: string
loading?: React.ReactType
error?: React.ReactType
}
interface State {
isLoading: boolean,
hasError: boolean
}
expor
浏览 0提问于2019-01-29得票数 0
5回答
我正在使用react，我试图在页面渲染时设置状态，但它一直抛出下面的错误。
-错误
已超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
-错误
下面是我的侧边栏组件代码。我使用Context API进行数据管理，如代码所示，并尝试使用通过Context API Consumer获取的值来设置showContext方法中角色的状态。
import React, { Component, PropTypes } from "react"
浏览 2提问于2018-09-17得票数 0
Repro:
const defaultState = {
value: 1;
increment() {
++this.value;
}
}
const AppContext = React.createContext({ myState: defaultState });
在反应元件中
class MyComponent extends Component {
static contextType = AppContext;
componentDidMount() {
const { myState } = this.context;
myS
浏览 0提问于2019-04-04得票数 1
1回答
我想热重新加载所有的反应组件，而不是一个一个地添加文件。
module.hot.accept(['react/a', 'react/b', 'react/c'], function (){})
在我的项目中，我使用require.context使所有js文件重新加载。
'user strict';
import React from 'react';
import ReactDOM from 'react-dom';
import A from 'a'
ReactDOM.rende
浏览 2提问于2017-10-03得票数 1
当我满足特定条件时，我在将react路由重定向到其他方面遇到了困难，我发现解决方案是useHistory，但我不能/我不能在我的类组件中使用它，我该怎么做呢 import React,{useState,useContext,Component} from 'react'
import Navbar from '../../shared/components/navigation/Navbar';
import {AuthContext} from '../../shared/context/auth-context'
import { Bro
浏览 10提问于2021-04-15得票数 0
回答已采纳
1回答
我使用+上下文来管理状态。但是，我遇到了这个问题，即使我正在传递上下文对象(至少我认为是这样)，React.useContext()仍然返回未定义的内容。我错过了什么很明显的东西吗？发生什么事了呢？
我一直试图使用usecontext从本地主机服务器获取数据，但它显示的是未定义的数据。如果我在app.js中获取数据，数据将被正确地获取。
StateContext.js
import React, { createContext, useState, useEffect } from "react";
const StateContext = (props) => {
浏览 4提问于2022-10-09得票数 1
回答已采纳
我一直试图从服务器上获取一些数据，而出于一些奇怪的原因，componentDidMount()并没有正常运行。我在console.log()中添加了一个componentDidMount()语句，以检查它是否启动。我知道，对服务器的请求是正常工作的，就像我在react之外使用它一样，它也正常工作。
class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
obj: {}
};
};
getAllS
浏览 3提问于2016-03-09得票数 17
回答已采纳
目前，我正在实现一个自定义列表在模型驱动的应用程序。我注意到，在对数据进行过滤时，调用了init方法和updateView方法，并且调用了3次updateView方法。但是，没有呈现新的视图。
我的猜测是，异步承诺没有被组件正确地排序和处理，因此最终的init方法会将所有内容重置到原始数据或用原始数据覆盖它。
怎样才是正确的方法呢？
最初呈现组件(我指的是init或updateView方法中的呈现代码)？
如果刷新数据，如何处理异步调用才能再次呈现视图？
目前，代码如下所示：
public init(context: ComponentFramework.Contex
浏览 7提问于2019-11-06得票数 2
我正在尝试从子组件表单<Form handler = {this.handler} />更新我的状态。但当我按回车键时，当前状态值为null。我认为问题出在我的处理程序(E)函数中，但我不知道是什么原因。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
import { Button } from 'react-
浏览 37提问于2018-06-06得票数 0
早上好!
我正在启动react钩子，但是当我想要使用useEffect时，它抛出了以下错误：
Line 4:5: React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
代码如下：
profile.js
import React, { useEffect } from 'react';
浏览 2提问于2020-09-26得票数 2
我有一个Route文件，其中包含多个如下所示的路由
const RouteUI = ({context}) =>
<Switch>
<React.Fragment>
<SDPRouteUI context={context} />
<SDPMRouteUI context={context} />
<ACRouteUI context={context} />
<DCRouteUI context={context} />
<Route path=
浏览 1提问于2019-02-11得票数 4
我在导航栏中有一个ButtonGroup作为单选按钮。我想在某些页面中返回选定按钮的值。我没有太多的反应经验，我有点迷失了。
我有两个..js文件: sidebar.js和page.js。
sidebar.js：
import React, { Component } from 'react';
import classNames from 'classnames';
import history from '../../core/history';
import {
Radio,
ButtonGroup,
Button
浏览 0提问于2017-03-05得票数 1
我想传递customerFlag的值，这是我在Login.jsx组件中声明的，并希望在Header.jsx中访问该值。我正在使用Context API和useContext。基本上，我是在两个组件之间传递值，您可以说是同级组件。但是problem是在UserContext.Provider value={ customerFlag }标签下得到的customerFlag值是未定义的。如果我做错了，请纠正我。我是一个反应js的初学者。
Login.jsx
import React, { createContext } from 'react';
//Creating
浏览 3提问于2021-05-08得票数 0
回答已采纳
我是ReactJS和上下文API/钩子的新手。我有一个基本的应用程序，其中父功能组件将值传递给3个按钮。但问题是，我在按钮上看到的是默认值(“欢迎”)，而不是我在上下文中设置的值。 Context.js： import React, { useState, useContext, useReducer } from 'react';
const initalDBStates = {Couchbase:[],MongoDB:[],Cassandra:[], jobId: null, results:[],activeDBName: "Welcome"}
浏览 17提问于2020-04-26得票数 0
回答已采纳
3回答
新的React Context API非常棒，但是我似乎总是在React组件之外使用自己的方式来访问它。当您在React函数组件或React类组件中时，一切都很好，但是，当您需要从上下文中读取或重置一个值时(例如，由于fetch函数中发生的异步操作)，没有简单的方法可以做到这一点。
那么，有没有办法在React组件之外访问react Context Consumer中的值呢？
后来的编辑:我继承了一个基于Redux的项目，并慢慢地摆脱了它。在action creators中，我有一个注销功能，可以清除存储中的内容：
export const logoutRequest = () => d
浏览 0提问于2019-08-28得票数 7
2回答
我有四个反应组分：
整体父母(App或类似的)
一个Header子，由App调用
Profile页面
LogoutLink，由Profile调用
我正在使用实现一个用户身份验证/登录系统。当用户登录时(通过Header中的登录按钮)，App会更改User对象的Context以包含从Auth0检索的所有数据。然后，系统中需要该数据的任何部分都可以访问该用户数据。
登录时，UI会自动更新(使用Context更改)，因此Header现在显示的是“嘿嘿{name}”，而不是以前的"Login“。这也是指向Profile页面/组件的链接(使用Router的<Link
浏览 2提问于2016-06-24得票数 1
回答已采纳
2回答
我有一个蓝牙类和侦听器方法。我想在蓝牙类中更新我的状态，我将在功能组件中显示。
JavaScript类
import React, { Component } from "react";
import { MySampleContext } from "../../contexts/MySampleContext";
export class BluetoothClass extends Component {
static contextType = MySampleContext;
sampleBluetoothListener
浏览 8提问于2022-04-27得票数 0
useContext一直在为我返回undefined。 我很困惑为什么我在这里，因为我有我的提供者和我的defaultValues。 在我使用上下文的地方： import React from 'react';
import { useContext } from 'react';
import { UserContext } from '../context/UserContext.js';
const Login = () => {
console.log(UserContext);
console.log(useConte
浏览 20提问于2021-11-06得票数 0
回答已采纳
test.js
export default class TestScreen extends React.Component {
static contextType= AppProvider;
componentDidMount() {
console.log('test',this.context);
}
render() {
return (
<AppConsumer>
{ (context) => (
<p>{context.
浏览 1提问于2019-03-09得票数 2
回答已采纳
到目前为止，我还没反应三周。在登录到我的虚拟应用程序后，我将用户从数据库(useEffect)作为一个按钮获取。我想点击一个特定的用户并访问他/她在下一页的数据。因此，我使用上下文API和useHistory分别向组件发送所选用户的数据(状态)，并使用历史导航到该组件。但是，当路由到该组件时，我会收到对组件可访问的数据的未定义数据。
import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
impor
浏览 1提问于2021-08-19得票数 1
回答已采纳
2回答
这就是我如何访问react上下文提供的值的方式。
这是提供者：
import React from 'react';
import Provider from './Provider';
ReactDOM.render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('roo
浏览 1提问于2020-06-06得票数 0
回答已采纳
我试图在我的盖茨比项目中使用上下文。我已经在我的上一个项目中成功地实现了这一点，并且我已经将代码复制到我的新项目中，并且它没有按预期工作。
这是我的context.js文件：
import React, { useContext, useState } from "react";
const defaultState = {
isLoggedIn: false,
};
const AuthContext = React.createContext();
export function useAuth() {
return useContext(AuthContex
浏览 4提问于2022-09-17得票数 0
我正在构建一个HoC，以便于创建可选择的表行。我正在尝试编写测试，以确保它使用正确传递的属性来呈现包装的组件。不幸的是，我不能让我的测试工作，因为似乎酶并没有渲染出所有的组件(或者，更有可能的是，我正在做一些有点愚蠢的事情)。
HoC
import React, { PropTypes, Component } from "react";
import { omit } from "lodash/fp";
const propsFilter = omit(["onSelect"]);
export default function selec
浏览 6提问于2017-01-26得票数 3
回答已采纳
React具有上下文的原因是允许多个兄弟组件共享一段状态数据。它是允许两个不相关的组件读/写共享变量的首选方法。之所以需要这样做，是因为如果不在屏幕之间传递数据，React无法轻松地将一个数据值传递给多个屏幕。相反，它允许每个屏幕在需要时访问数据。
所以..。该实现要求创建一个称为Context.Provider组件的组件，然后必须包装需要访问Context.Provider中共享数据的组件。但是为什么呢？为什么这是一个需求？Context的设计目的是在没有层次关系的组件之间共享数据，并且需要将组件放在一个层次结构中才能做到这一点？
如果简单地去掉使用Context.Provider的要求，让
浏览 31提问于2019-11-24得票数 14
For context:我对编程还是很陌生的，我一直在用我正在工作的项目来实现一个用户系统，一开始我试图分割项目用户的react路由器-dom来创建一个登录页面。在接受了我有点过于深入之后，我研究了其他的解决方案，从我所读到的情况来看，auth0可能会以更精简的方式解决我的所有问题。然而，现在，当尝试删除index.js文件中的index.js指示时，我会得到一堆错误。
此外，我还没有找到auth0代码将与索引文件中的react router交互的示例。我还没有开始应用auth0的任何代码。我将删除所有与响应相关的内容--首先是路由器，然后将应用程序恢复到以前的状态。
因此，关于我的问题和具体
浏览 8提问于2022-07-01得票数 1
回答已采纳
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
我正在使用钩子，但是我得到了这个错误
第25行:在既不是React函数组件也不是自定义React钩子函数的"contact“函数中调用React Hook "React.useState”第26行:在既不是React函数组件也不是自定义React钩子函数的"contact“函数中调用React Hook "React.useState”第27行:在既不是React函数组件也不是自定义React钩子函数的React Hook函数中调用react Hook "React.useState“
export default function contact()
浏览 2提问于2019-08-03得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
