时间戳

首页 > 解决方案 > React 上下文提供程序不显示默认值

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

问题描述

我正在努力使我的项目井井有条。所以我创建了一个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={}并尝试从上下文中获取默认值时，它们不再存在。

任何想法发生了什么，并就如何处理它提出建议，并就最佳实践提出建议？也许我做错了？

标签： reactjsreact-context

解决方案

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

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需要命名，但我不建议这样做。以后的维护可能很难遵循。

推荐阅读