我试图传递我在setting.js中设置的值,并通过使用react上下文概念将其传递给我的所有子节点。
下面是我所有的密码。
thingscontext.js (这是我创建上下文对象的地方)
import React from "react";
const ThingsContex = React.createContext({});
export const ThingsProvider = ThingsContex.Provider;
export default ThingsContex;setting.js (我的自定义提供者)
import React, { useState } from "react";
import ChildOne from "./Child_One";
import ChildTwo from "./Child_Two";
import { ThingsProvider } from "./thingscontext";
function Setting() {
const [starttime, setStartTime] = useState(8);
return (
<div>
<h2>Setting</h2>
<ThingsProvider value={starttime}>
<ChildOne />
<ChildTwo />
</ThingsProvider>
</div>
);
}
export default Setting;Child_one.js (这是我要调用的输出值的地方)
import React, { useContext } from "react";
import ThingsContext from "./thingscontext";
function ChildOne() {
const things = useContext(ThingsContext);
console.log("things ", things);
return (
<div>
<h2>Child One</h2>
</div>
);
}
export default ChildOne;预期结果:打印从设置中传递的值
实际结果:空对象
这是我的码箱,只需导航到ChildOne页面并打开控制台,它将显示它正在打印空对象。任何帮助都是非常感谢的。
发布于 2021-10-15 05:59:47
当您导航到/childOne路由时,react路由器从index.js呈现这一行代码
<Route path="/childone" component={ChildOne} />这一行中的ChildOne不是上下文提供程序的子程序,因此它的默认值{}被记录下来。(因为您将上下文创建为React.createContext({})。
如果导航到/setting,就会看到所需的结果。
https://stackoverflow.com/questions/69580425
复制相似问题