React + TypeScript 只允许特定类型的孩子

Question

我在尝试只允许将特定子级传递给组件时遇到了麻烦。

这是我的组件，HeaderLink

import { SFC, ReactElement } from "react";

import "./Header.scss";

export interface IHeaderLinkProps {
  url: string;
  label: string;
}

const HeaderLink: SFC<IHeaderLinkProps> = ({ url, label }): ReactElement => (
  <li className="nav-item">
    <a href={url}>{label}</a>
  </li>
);

export default HeaderLink;

和标题

import { SFC, ReactElement } from "react";
import { IHeaderLinkProps } from "./HeaderLink";

import "./Header.scss";

interface IHeaderProps {
  children: ReactElement<IHeaderLinkProps> | ReactElement<IHeaderLinkProps>[];
}

const Header: SFC<IHeaderProps> = ({ children }): ReactElement => {
  return (
    <header className="header">
      <div className="container">
        <div className="row">
          <div className="col">
            <img
              className="header__logo"
              src={"/logo.png"}
              alt="monqrime-logo"
            />

            <ul className="header__nav">{children}</ul>
          </div>
        </div>
      </div>
    </header>
  );
};

所以问题是我只想允许 HeaderLink 组件作为子项传递给 Header，但我目前的解决方案仍然允许我将所有内容都作为子项。

Answer 1

我正在这样做（基于 Danziger 的回答）：

type MaybeArray<T> = T[] | T
export type ChildrenOfType<T> = MaybeArray<ReactElement<ComponentPropsWithoutRef<T>>>

用法：

interface SelectBoxProps extends Pick<React.ComponentPropsWithoutRef<'select'>, 'id' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'required' | 'defaultValue' | 'style'> {
    children?: ChildrenOfType<'option'>
}

我不知道它是否真的有任何作用——我的 IDE 不会在我向其中抛出 <div> 时抱怨，但至少它可以用作人工文档。

Answer 2

我可能会将IHeaderProps.children 声明为：

children: React.ReactElement<IHeaderProps> | React.ReactElement<IHeaderProps>[];

考虑同时拥有一个和多个孩子的可能性。

无论如何，你想要的都是不可能的。见：

• How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?

• React Component children typecheck with typescript

你可以做的是声明一个道具，比如说links?: IHeaderLinkProps[]，传递你需要创建那些HeaderLinks而不是它们的JSX的道具，并在Header中渲染它们：

interface IHeaderProps {
  children?: never;
  links?: IHeaderLinkProps[];
}

...

const Header: React.FC<IHeaderProps> = ({ links }) => {
  return (
    ...

    <ul className="header__nav">
      { links.map(link => <HeaderLink key={ link.url } { ...link } />) }
    </ul>

    ...
  );
};