即使对于最简单的形式，React 上下文提供程序也不会传递值

Question

我被困在 React 上下文中，我一直在尝试使用它但没有奏效。

所以我在Codesandbox上创建了一个非常简单的项目，以找出它为什么不起作用。 我的项目只有App.js和CategoriesContext.js，就是这样。

一旦我添加提供者项目甚至没有显示这个 h2。 我也尝试将其作为带有 {(( => 元素的函数}，但也没有工作。

应用.js

import React from "react";
import "./styles.css";
import { CategoriesProvider } from "../src/Context/CategoriesContext";
export default function App() {
return (
<CategoriesProvider>
<div className="App">
<h1>Hello Hoooooks</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</CategoriesProvider>
);
}

和类别上下文.js

import React from "react";
export const CategoriesContext = React.createContext();
export const CategoriesProvider = props => {
return (
<CategoriesContext.Provider value={"Hello"}>
{props.chilren}
</CategoriesContext.Provider>
);
};

这是简单项目的链接 https://codesandbox.io/s/hooks-example-8bkmk?file=/src/App.js

Answer 1

尝试使用props.children，目前您渲染props.chilrenundefined：

export const CategoriesProvider = props => {
return (
<CategoriesContext.Provider value={"Hello"}>
{props.children}
</CategoriesContext.Provider>
);
};