javascript - 要求组件子项属于特定类型

Question

我有以下组件:

interface OwnProps {
  children: React.ReactElement<any>[];
}

export class ActionMenuRenderer extends React.Component<OwnProps> {
  render() {
    const { children } = this.props;
    const actions = React.Children.toArray(children) as React.ReactElement<any>[];

    return (
      ...
    );
  }
}

我是这样调用它的:

<ActionMenuRenderer>
  <button type="button">View</button>
  <button type="button">Edit</button>
  <button type="button">Delete</button>
</ActionMenuRenderer>

我想要求 ActionMenuRenderer 的 child 可以是 <a> s 或 <button>秒。我尝试进行以下更改，但在我的 IDE 中没有看到编译错误:

interface OwnProps {
  children: React.ReactElement<HTMLButtonElement | HTMLAnchorElement>[];
}

我怎样才能要求子组件是特定类型的？

Answer 1

目前这在 Typescript 中是不可能的(从 3.2 开始)。 Typescript 会将所有 React 组件生成为通用 JSX.Element 类型，不幸的是，它会满足您可能会尝试限制的任何特定子类型。

来源: https://github.com/Microsoft/TypeScript/issues/21699