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>;
);

然后在应用程序组件中使用它

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

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

如果愿意，您仍可以将YourContextProvider命名为ThemeContextProvider，但我不建议这样做。将来可能很难遵循。

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

1 个答案: