我有一个函数可以组合多个上下文提供程序组件并返回一个组合的上下文提供程序。我收到 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;
答案 0 :(得分:0)
根据提到该问题是匿名函数的评论,我能够使用以下代码解决错误:
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);