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

标签： javascriptreactjstypescripteslint

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