Typescript 如何创建内部和外部组件都作为props 传入的包装器组件

我应该指出，你可以简单地做:

import { FC, PropsWithChildren } from 'react';

const OuterComponent: FC<PropsWithChildren> = ({ children }) => {
  return (
        <Tooltip title={'just testing purposes'}>
          {'blah'}
          <br />
          {children}
        </Tooltip>
  );
};

const InnerComponent = <Button>Button text</Button>;

return (
      <OuterComponent>InnerComponent</OuterComponent>
);

但我已经修复了下面的代码，以防您有需要此模式的原因.

修复WrappedComponent的类型定义:

import { FC, PropsWithChildren, ReactNode } from 'react';

type WrappedComponentProps = {
  OuterComponent: FC<PropsWithChildren>;
  InnerComponent: ReactNode;
};
const WrappedComponent: FC<WrappedComponentProps> = ({
  OuterComponent,
  InnerComponent,
}) => {
  return <OuterComponent>{InnerComponent}</OuterComponent>;
};

您可以这样使用它:

return (
    <WrappedComponent
      OuterComponent={({ children }) => (
        <Tooltip title={'just testing purposes'}>
          {'blah'}
          <br />
          {children}
        </Tooltip>
      )}
      InnerComponent={<Button>Button text</Button>}
    />
  );

如果您不知道，在两个JSX组件标记之间出现的任何内容都会被简单地传递给父props的children属性.

堆叠闪光灯:https://stackblitz.com/edit/stackblitz-starters-n7j9t8?file=src%2FApp.tsx