如何通过Link异步传递道具给子对象？
通过Link异步传递道具给子对象的方法是使用React中的Context API。Context API是React提供的一种跨组件传递数据的方式，可以在组件树中的任何地方访问共享的数据。
下面是具体的步骤：
- 创建一个Context对象：首先，在父组件中创建一个Context对象，可以使用React的createContext方法来创建。例如：
const MyContext = React.createContext();- 在父组件中提供数据：在父组件中，通过Context对象的Provider组件来提供共享的数据。将需要传递给子组件的道具作为Provider组件的value属性的值。例如：
<MyContext.Provider value={props}>
{/* 子组件 */}
</MyContext.Provider>- 在子组件中接收数据：在子组件中，通过Context对象的Consumer组件来接收共享的数据。Consumer组件使用一个函数作为子元素，并将共享的数据作为该函数的参数。例如：
<MyContext.Consumer>
{props => (
{/* 使用共享的数据 */}
)}
</MyContext.Consumer>通过上述步骤，父组件中的道具数据就可以通过Context API异步传递给子组件。
关于Context API的更多信息，可以参考腾讯云的相关文档：React Context API
相关·内容
1回答
使用时，无法获取数据
reactjs
这是我的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
回答已采纳
1回答
未能从React.Context API获取提供程序数据
reactjs
我正在尝试学习用于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
回答已采纳
5回答
如何从使用者更新提供者中的上下文值？
javascript、reactjs、react-context
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
1回答
值不会通过React上下文API传递。
reactjs、react-native、react-context
我正在尝试用重写我的应用程序，但是我已经面临了下一个问题--我想通过提供者传递给消费者的价值没有被传递。
初始状态：
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
回答已采纳
5回答
未定义的React上下文返回
reactjs
我使用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
回答已采纳
2回答
如何从Reactjs中的类组件导出上下文？
javascript、reactjs
我在从组件导出上下文时遇到问题。包含上下文的组件如下所示。
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
1回答
使用上下文api传递属性状态属性
javascript、reactjs、react-context
我希望将状态值名称传递给另一个组件Context3.js，而不使用props。我使用context api来创建context，并通过provider传递了值。现在，在Context3.js中，我正在尝试使用它，但在输出屏幕上，我无法看到我的输出。 import './App.css';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context3/&g
浏览 19提问于2021-07-29得票数 0
2回答
如何以编程方式提供和使用上下文？
javascript、reactjs、jsx、react-context
所以我的问题很简单。在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
3回答
响应上下文和单独的类
javascript、reactjs
我已经放弃了让mt绕着Redux (我是新的反应)的希望，并看到Alpha版本的React提供了一个新的上下文。
所以我试着学习它，我的目标是，我有一个Navbar，我想回应我的上下文中的一个状态，{isAuthorised: false}。
我在跟踪
但他把所有的代码都放在一个文件里。我正试着做得“对”。
我所做的是创建了一个名为“context”的文件夹，并在其中创建了一个名为provider.jsx的jsx。
import React, {Component} from 'react';
export default class MyProvider extends
浏览 0提问于2018-03-25得票数 8
2回答
在尝试使用上下文API时看到“呈现不是函数”
javascript、reactjs
我正在尝试学习上下文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
回答已采纳
4回答
ReactJs ContextApi
javascript、reactjs、react-native、react-redux
我无法在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
回答已采纳
1回答
获取api并使用上下文api发送状态
reactjs
这是下面的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
1回答
如何通过React上下文更新状态？
reactjs、typescript
下面是一个使用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
回答已采纳
3回答
为什么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
回答已采纳
2回答
在ajax成功后如何更新新上下文提供程序的状态
reactjs
在API调用成功之后，尝试更新在新的React提供程序中初始化的状态。我用的是React 16.3。
无法更新状态值，请按照记录的步骤执行，但仍未能实现。
这就是我试过的：
HTML：
<MyProvider>
<MyConsumer>
{context => (
{context.updateInitialData(this.props)}
)}
</MyConsumer>
</MyProvider>
联署材料：
import React, { Component } from 'react&#
浏览 1提问于2018-05-23得票数 2
回答已采纳
1回答
React Router: TypeError: render不是函数
javascript、reactjs
我正在开发这个应用程序，当我运行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
2回答
单元测试:使用酶的react context api返回一个空对象
reactjs、unit-testing、jestjs、enzyme、react-context
我第一次尝试使用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
回答已采纳
1回答
ReactJs上下文-元素类型无效
javascript、reactjs、react-context
我正在尝试使用新的ReactJs上下文，作为Redux的替代，但是我得到了一个错误。
不变冲突:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但是got: object。
这里是我的布局的代码，我已经包装在MyProvider标记中
import React, { Component } from "react";
import { NavMenu } from "./NavMenu";
import { MyProvider } from "../contexts/context";
export cl
浏览 0提问于2018-08-03得票数 1
回答已采纳
2回答
"this.context“返回空对象
javascript、reactjs
我不知道为什么：
我的反应是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
回答已采纳
1回答
与react上下文相关的问题
javascript、reactjs
我正在尝试将一个值从一个文件传递到另一个文件。我在实现context.Cant时遇到问题，找出我在这里做错了什么！
import React from 'react'
const Mycontext = React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props)
}
render() {
return (< Mycontext.Provider value = {"H
浏览 31提问于2018-08-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
