React 上下文提供程序不显示默认值

Question

我正在努力使我的项目井井有条。所以我创建了一个config 文件夹，在其中放置了一个context 文件夹。在context 文件夹中，我想处理所有上下文。

所以我有index.ts，如下：

import { ThemeContextProvider } from './context';
export default ThemeContextProvider;

还有一个context.tsx 文件，其中包含以下内容：

import { createContext } from 'react';

export const ThemeContext = createContext({});
export const ThemeContextProvider = ThemeContext.Provider;

在我的app.tsx 我有

import React from 'react';
import ThemeContextProvider from './config/context';
import theme from './theme';

export default function App() {
  return (
    <ThemeContextProvider value={theme}>
      ...
    </ThemeContextProvider>
  );
}

以上工作。但我想将主题移动到context.tsx 并将其作为默认值加载到那里，因此我尽可能保持App.tsx 干净

所以在context.tsx我改成：

import { createContext } from 'react';
import theme from '../../theme';

export const ThemeContext = createContext(theme);
export const ThemeContextProvider = ThemeContext.Provider;

在App.tsx 中，我将<ThemeContextProvider value={theme}> 更改为<ThemeContextProvider>

React 立即抱怨 <ThemeContextProvider> 并想要 value 属性。当我通过 value={} 并尝试从上下文中获取默认值时，它们不再存在。

对正在发生的事情有什么想法并就如何处理它提出建议，并就最佳做法提出建议？可能是我写错了？

Answer 1

您可以创建另一个组件来包装内容并将主题传递给上下文提供者

import { createContext } from 'react';
import theme from '../../theme';

export const ThemeContext = createContext({});
export const ThemeContextProvider = ThemeContext.Provider;
export const YourContextProvider = ({ children }) => (
  <ThemeContextProvider value={theme}>
    {children}
  </ThemeContextProvider>;
);

然后在app组件中使用

import React from 'react';
import YourContextProvider from './config/context';

export default function App() {
  return (
    <YourContextProvider>
      ...
    </YourContextProvider>
  );
}

如果需要，您仍然可以将 YourContextProvider 命名为 ThemeContextProvider，但我不建议这样做。以后的维护可能很难跟进。