如何在 TypeScript 的另一个组件中键入占位符 React 元素？

Question

我无法找出这个 Typescript 错误。这是代码：

interface AppProps {
  Component: JSX.ElementClass;
  pageProps: JSX.ElementAttributesProperty;
}

const App = ({ Component, pageProps }: AppProps) => {
  console.log(Component)
  console.log(pageProps)
  return (
    <>
    {globalStyles}
    <Component {...pageProps} />
  </>)
}

我得到了迷人的错误：JSX element type 'Component' does not have any construct or call signatures. 反对倒数第三行。

我的猜测是因为我直接使用 <Component ... 作为 JSX？而且它不是真正的类型，即它只是参数名称，用作实际提交的任何 JSX 组件的替代？不知何故 children？在代码中，我实际上使用 React Fragment 来包含 <EmotionGlobal/> 和 <Home/> 元素。

Answer 1

请看这里：

interface AppProps<P> {
  Component: React.JSXElementConstructor<P>;
  pageProps: P;
}

const App = ({ Component, pageProps }: AppProps<{ data: string }>) => {
  console.log(Component);
  console.log(pageProps);
  return (
    <>
      <Component {...pageProps} />
    </>
  );
};

export default App;

一些解释：

将组件更改为正确的类型 - JSXElementConstructor<P> 其中 P 是您需要的道具类型
使界面 AppProps 通用
使用通用类型 P 键入 pageProps

如何在 TypeScript 的另一个组件中键入占位符 React 元素？

How do I type a placeholder React element in another Component in TypeScript?

typescript

reactjs

next.js