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

【问题标题】：Eslint: component definition is missing display name for Combined ContextEslint：组件定义缺少组合上下文的显示名称
【发布时间】：2021-08-16 22:35:00
【问题描述】：

我有一个组合多个上下文提供程序组件并返回一个组合上下文提供程序的函数。我收到一个 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;

【问题讨论】：

这有帮助吗？ -> stackoverflow.com/questions/55620562/…
感谢您的链接，该问题的代码非常不同。很难得出相关性。
问题是一样的，你的组件是一个匿名函数。

标签： javascript reactjs typescript eslint

【解决方案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);

【讨论】：