在 React 和 Typescript 中只允许特定组件作为子组件

Question

我只想允许特定组件作为子组件。例如，假设我有一个 Menu 组件，它应该只包含 MenuItem 作为子组件，如下所示：

<Menu>
  <MenuItem />
  <MenuItem />
</Menu>

所以当我尝试将另一个组件作为子组件时，我希望 Typescript 在 IDE 中给我一个错误。有些东西警告我，我应该只使用MenuItem 作为孩子。例如在这种情况下：

<Menu>
  <div>My item</div>
  <div>My item</div>
</Menu>

This thread 几乎相似，但不包括 TypeScript 解决方案。我想知道这个问题是否可以使用 TypeScript 类型和接口来解决。在我的想象世界中它看起来像这样，但是类型检查当然不起作用，因为子组件有一个 Element 类型：

type MenuItemType = typeof MenuItem;

interface IMenu {
  children: MenuItemType[];
}

const MenuItem: React.FunctionComponent<IMenuItem> = ({ props }) => {
  return (...)
}

const Menu: React.FunctionComponent<IMenu> = ({ props }) => {
  return (
    <nav>
      {props.children}
    </nav>
  )
}

const App: React.FunctionComponent<IApp> = ({ props }) => {
  return (
    <Menu>
      <MenuItem />
      <MenuItem />
    </Menu>
  )
}

有没有办法通过 Typescript 实现这一点？喜欢用仅与特定组件相关的东西来扩展 Element 类型？

或者，什么是确保孩子是特定组件的实例的好方法？无需添加查看子组件 displayName 的条件。

Answer 1

为此，您需要从子组件（最好也是父组件）中提取 props 接口并以这种方式使用它：

interface ParentProps {
    children: ReactElement<ChildrenProps> | Array<ReactElement<ChildrenProps>>;
}

所以在你的情况下它看起来像这样：

interface IMenu {
  children: ReactElement<IMenuItem> | Array<ReactElement<IMenuItem>>;
}

const MenuItem: React.FunctionComponent<IMenuItem> = ({ props }) => {
  return (...)
}

const Menu: React.FunctionComponent<IMenu> = ({ props }) => {
  return (
    <nav>
      {props.children}
    </nav>
  )
}