Eslint：组件定义缺少组合上下文的显示名称

Question

我有一个函数可以组合多个上下文提供程序组件并返回一个组合的上下文提供程序。我收到 eslint 错误：Component definition is missing display name (eslintreact/display-name)。我该如何解决错误？

const providers = [AuthProvider, CartProvider, LocationProvider];

const combineComponents = (...components: FC[]): FC => {
  return components.reduce(
    (AccumulatedComponents, CurrentComponent) => {
      return ({ children }: ComponentProps<FC>): JSX.Element => {
        return (
          <AccumulatedComponents>
            <CurrentComponent>{children}</CurrentComponent>
          </AccumulatedComponents>
        );
      };
    },
    ({ children }) => <>{children}</>
  );
};

export const CombinedContextProvider = combineComponents(...providers);

然后可以通过以下方式在 CombinedContextProvider 中使用 App.tsx 组件：

import React from 'react';

const App: React.FC = ({ Component, pageProps }) => {
  <CombinedContextProvider>
    <Component {...pageProps} />
  </CombinedContextProvider>
)};

export default App;

Answer 1

根据提到该问题是匿名函数的评论，我能够使用以下代码解决错误：

import React, { ComponentProps, FC } from 'react';

import { AuthProvider } from './auth_context';
import { CartProvider } from './cart_context';
import { LocationProvider } from './location_context';

const providers = [AuthProvider, CartProvider, LocationProvider];

const combineComponents = (...components: FC[]): FC => {
  return components.reduce(
    (AccumulatedComponents, CurrentComponent) => {
      return function AccumulateComponents({ children }: ComponentProps<FC>): JSX.Element {
        return (
          <AccumulatedComponents>
            <CurrentComponent>{children}</CurrentComponent>
          </AccumulatedComponents>
        );
      };
    },
    ({ children }) => <>{children}</>,
  );
};

export const CombinedContextProvider = combineComponents(...providers);