导出 JSX 元素数组时出现 "JSX element type 'App' does not have any construct or call signatures." ts(2604) 错误

Question

我有一个 returns JSX 元素数组的函数。当我将其传递给 ReactDOM.render 时，出现了上述错误。

wrappers.tsx

const FooterWithStore:React.FC = () => (
    <Provider store={store}>
      <FooterLangWrapper />
    </Provider>
)

const AppWithStore:React.FC = () => (
    <Provider store={store}>
      <LangWrapper />
    </Provider>
);

const WrapFooter = (WrappedComponent: React.FC) => [
    <WrappedComponent key="1" />,
    <FooterWithStore key="2" />
]

const App = WrapFooter(AppWithStore)
export default App

index.tsx

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

试试这个解决方案

const FooterWithStore:React.FC = () => (
    <Provider store={store}>
      <FooterLangWrapper />
    </Provider>
)

const AppWithStore:React.FC = () => (
    <Provider store={store}>
      <LangWrapper />
    </Provider>
);

const WrapFooter = (WrappedComponent: React.FC) => () => [
    <WrappedComponent key="1" />,
    <FooterWithStore key="2" />
]

const App = WrapFooter(AppWithStore)
export default App

您需要 return 函数，App 常量包含调用 WrapFooter 后形成的对象。因此，您只需要使用一个闭包，以便 WrappedComponent 在 WrapFooter 范围内可用。

导出 JSX 元素数组时出现 "JSX element type 'App' does not have any construct or call signatures." ts(2604) 错误

Getting "JSX element type 'App' does not have any construct or call signatures." ts(2604) error when exporting array of JSX Element

reactjs

typescript

react-dom