如何在反應 typescript 中鍵入一個 function 組件的道具

Question

我有一個反應組件，它接受一個反應 function 組件作為道具。

我的代碼：

interface ComponentBProps {
  someComponent?: React.ComponentType;
  msg: string;
}

function ComponentB({someComponent: SomeComponent, msg}: ComponentBProps ) {
  return (
    <div>
      {
        SomeComponent && <SomeComponent>
          <div>
            {msg}
          </div>
        </SomeComponent>
      }
    </div>
  );
}

function ComponentA() {
  return (
    <ComponentB
      someComponent={({children}) => <div>{children}</div>}
      msg="msg"
    />
  );
}

它給了我錯誤

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.
<SomeComponent>
  <div>

和

Property 'children' does not exist on type '{}'.
<ComponentB
  someComponent={({children}) => <div>{children}</div>}
  msg="msg"
/>

我應該分配給什么類型

someComponent?: React.ComponentType;

反應版本： ^18.2.0

Answer 1

如果你想強制執行特定的 React 組件，則以下方法有效。

const ComponentA: React.FC<{ name: string }> = ({ name }) => <div>hello {name}</div>;

interface PropsB {
  component: typeof ComponentA;
}

const ComponentB: React.FC<PropsB> = ({ component: Component }) => (
  <div>
    <Component name='John' />
  </div>
);

<ComponentB component={ComponentA} />;

Answer 2

我喜歡使用從 React 導入的FunctionComponent

type Props = {
   component: FunctionComponent<OtherProps>
}

export function SomeComponent({ component: Component }: Props) {
  return <Component />
}