如何在react native中从多个上下文访问状态？
在React Native中，可以通过使用Context API来从多个上下文访问状态。Context API是React提供的一种跨组件传递数据的方式，可以在组件树中共享数据，避免了通过props一层层传递数据的繁琐过程。
下面是在React Native中从多个上下文访问状态的步骤：
- 创建上下文：首先，需要创建一个上下文对象，可以使用React的createContext方法来创建。例如：
const MyContext = React.createContext();- 提供状态：在某个父组件中，通过Context的Provider组件提供状态。将需要共享的状态作为Provider组件的value属性传递。例如：
<MyContext.Provider value={myState}>
// 子组件
</MyContext.Provider>- 消费状态：在需要访问状态的子组件中，使用Context的Consumer组件来消费状态。Consumer组件接收一个函数作为子组件，并将当前的状态值作为参数传递给该函数。例如：
<MyContext.Consumer>
{value => (
// 使用状态值
)}
</MyContext.Consumer>- 多个上下文：如果需要从多个上下文访问状态，可以在同一个组件中嵌套多个Consumer组件。每个Consumer组件只能访问与之对应的Provider组件提供的状态。例如：
<MyContext1.Consumer>
{value1 => (
<MyContext2.Consumer>
{value2 => (
// 使用状态值
)}
</MyContext2.Consumer>
)}
</MyContext1.Consumer>通过以上步骤，就可以在React Native中从多个上下文访问状态了。
推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mmp）
注意：本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
相关·内容
我使用React将一些状态传递给不同的子组件，并返回undefined。
父组件：
export const UserContext = React.createContext();
export class Provider extends Component {
state = {
editGroup: false,
}
render() {
return (
<UserContext.Provider value={{
state: this.state
}}>
{this.props.chi
浏览 0提问于2018-12-14得票数 18
回答已采纳
1回答
这是我的App.js，我使用的是上下文api，但是我无法在{context.country}和{context.job} (子组件即邻居)中获取数据。这是我的App.js，我使用的是上下文api，但是我无法在{context.country}和{context.job} (子组件即邻居)中获取数据。App.js
import React, { Component } from 'react';
import Neighbour from './Neighbour';
const MyContext = React.createC
浏览 0提问于2018-06-21得票数 1
回答已采纳
5回答
MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
我在一个分离的js文件中创建了我的上下文，在这里我可以访问我的父组件和子组件。
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component
浏览 0提问于2018-05-24得票数 117
这是下面的App.js，在获取数据和setState时，我无法在子目录中显示日期，但是我的数据是在控制台日志中获取的。就连我都把MyContext放在单独的文件里
//App.js
class MyProvider extends Component {
state = { userData: '' }
componentWillMount() {
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(userData =>
浏览 1提问于2018-06-23得票数 0
我在从组件导出上下文时遇到问题。包含上下文的组件如下所示。
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1
浏览 25提问于2019-11-26得票数 4
下面是一个使用React上下文的简单示例：
type MyState = { counter: number };
const MyContext = createContext<[MyState, () => void]|undefined>(undefined);
class MyComponent extends Component<any, MyState> {
constructor(props: any) {
super(props);
this.state = { counter: 42 };
}
render() {
浏览 13提问于2022-05-19得票数 0
回答已采纳
4回答
我无法在ReactJs中的父组件(App.js)、子组件(Guest.js)中呈现我的状态。我不确定第11行{this.props.children}是否应该存在。
App.js
1. import React, { Component } from 'react';
2. export const MyContext = React.createContext();
3. export default class App extends Component {
4. state = {
5. name: "Rahul",
6. age:
浏览 3提问于2020-06-03得票数 0
回答已采纳
2回答
所以我的问题很简单。在React js中，我希望使用上下文将一些状态和处理程序从父进程传递给第三个孙子进程。我已经在jsx中实现了这一点，但是我想使用javascript o中的状态，在我完全输出我的状态之前，我有一些逻辑。我把我的问题分成两个部分。1.)我到目前为止所做的一切。2.)本质上我想做的是。
1.)
//该文件只存储上下文MyContext.js
import React, { Component } from 'react';
export const MyContext = React.createContext();
MyProvider.js //父级和子
浏览 0提问于2020-02-04得票数 1
我正在开发这个应用程序，当我运行npm start时，我一直收到这个错误："TypeError: render is not a function“。我已经厌倦了从删除依赖项到运行npm install的所有工作。我甚至多次更新react-router-dom和react-dom。我在这里迷路了。
以下是存储库的GitHub
代码如下：
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react
浏览 0提问于2018-11-03得票数 1
我正在尝试学习用于react的上下文api，但我想我对它的一些原则感到困惑。我跟着的嘟嘟声根本不起作用。我的反应是正确的。
Context.js
import React, { Component } from "react";
const MyContext = React.createContext();
export default class MyProvider extends Component {
state = {
userName: 'Kelly'
};
render() {
return(
<
浏览 3提问于2018-06-04得票数 0
回答已采纳
1回答
我正在尝试用重写我的应用程序，但是我已经面临了下一个问题--我想通过提供者传递给消费者的价值没有被传递。
初始状态：
let initialState = {
ve: 'randomValue'
};
export default initialState;
提供者：
import React, {Component} from 'react';
import MyContext from './myContext';
import initialState from './initialState';
class
浏览 0提问于2019-02-24得票数 1
回答已采纳
我解决不了这个案子。
是父母送的
<ChildDiv key={el} width={i} value={' '}></ChildDiv>
是儿童寄来的
<MyContext.Consumer>
{context => (
<div onClick={() => test(value, context.ChangeTurn)} className="row">
</div>
)}
</MyContext.Consumer>
浏览 6提问于2019-11-27得票数 0
回答已采纳
我第一次尝试使用React context API将信息从主组件传递到孙组件。 因此，首先我创建了一个上下文 const MyContext = React.createContext({});
export default MyContext; 下面是设置上下文值的主要组件 import MyContext from "./MyContext.js";
import ParentComponent from "./ParentComponent.js";
function App() {
return (
<div>
浏览 15提问于2019-04-17得票数 6
回答已采纳
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
回答已采纳
我不知道为什么：
我的反应是16.8x
我在提供者和使用者之间有一个组件，以避免上述两个元素之间的循环调用。
我希望我的上下文可以在生命周期组件中直接访问，并看到ReactJS提出了this.context的方法。
我的
这里是我的反应片段
import React, {Component}from "react";
import "./App.css";
// first we will make a new context
const MyContext = React.createContext();
// Then create
浏览 0提问于2019-02-10得票数 2
回答已采纳
我对React是个新手，正在尝试理解Context api。现在，我有一个显示项目列表的组件。我也有一个组件，显示有关该项目的详细信息。我想要做的是，当我点击某个项目时，显示组件会显示该项目的信息。这是我当前的代码。我当前收到一个错误，即状态未在我的Product.js文件中定义。
PRODUCTS.JS
import React, { Component } from 'react';
import './App.css';
import { MyProvider, MyContext } from "./Context";
import {
浏览 1提问于2019-12-11得票数 0
我正在尝试学习上下文API，我想要实现的是在我的标题中显示登录用户，以及根据登录状态操作我的菜单选项(在状态中存储'isAuthenticated‘安全吗？)
我的文脉课：
import React from 'react';
const Context = React.createContext();
export class Provider extends React.Component {
state = {
isAuthenticated: true,
user: {
name: "
浏览 0提问于2019-06-13得票数 7
回答已采纳
我正在尝试适应React的上下文API功能，我想要做的是在另外两个组件中使用一个组件中提供的上下文。不幸的是，当试图访问第二个上下文使用者中的上下文时， context 的值是undefined。我怎么才能解决这个问题？
Provider (snippet)
const [loginState, changeLoginState] = useState({
isAuthenticated: false,
login: () => {}
});
const loginHandler = () => {
let newState = {...login
浏览 1提问于2021-07-13得票数 1
回答已采纳
1回答
我有2 component在反应中。前Producer.js和Consumer.js.。两者之间不存在parent child关系。
我需要在Producer.js中设置一个变量，并在Consumer.js中使用该值。
我在谷歌搜索并尝试使用context API，但它不起作用。我是新来的，所以不能解决这个问题。
所以在producer.js。
const Name = createContext(false);
const [isActive,setIsActive]=useState(false);
<Name.Provider value={isActive}>
浏览 2提问于2022-02-23得票数 2
回答已采纳
为什么this.context是一个空对象，在这个反作用组件生命周期方法中？
上下文在该上下文的Consumer中具有正确的值。只有this.context API失败了。
const LoremContext = React.createContext({
lorem: "ipsum",
})
class MenuItem extends React.Component {
componentDidMount() {
console.log(
"In MenuItem.componentDidMount,
浏览 1提问于2018-10-24得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
