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

Question

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

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

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

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

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

js prettyprint-override">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实现这一点？是否要使用仅与特定组件相关的内容扩展元素类型？

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

Answer 1

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

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

因此，在您的情况下，它将如下所示：

js prettyprint-override">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>
  )
}