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

Question

我有一个组合多个上下文提供程序组件和 returns 一个组合上下文提供程序的功能。我收到一个 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);

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

Eslint: component definition is missing display name for Combined Context

javascript

typescript

reactjs

eslint