React/TypeScript：专门将 props.children 输入到组件中答案

【问题标题】：React/TypeScript: Specifically type props.children to componentReact/TypeScript：专门将 props.children 输入到组件中
【发布时间】：2020-10-22 00:05:40
【问题描述】：

假设我们有一个渲染props.children 的组件Foo 和另一个组件Bar。两个模块都导出一个 props 接口。

有没有办法强制Foo 的孩子只能属于Bar 类型？

理想情况下，我们可以在构建时使用 TypeScript 完成此任务。

例子：

import { createElement, FC, ReactNode } from 'react';
import { Bar, BarProps } from '../Bar';

export interface FooProps {
  children?: ReactNode; // this works
  // children?: ReactNode<BarProps>; // nope
  // children?: Bar; // nope
}

export const Foo: FC<FooProps> = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

注意：我们没有使用 PropTypes

【问题讨论】：

出于好奇，为什么需要对 props.children 有很强的要求？
我们的内部组件库需要遵守相当严格的用户体验规范/设计指南。一个人为的例子是不应允许 Table 成为 Dropdown 组件的子组件。

标签： reactjs typescript

【解决方案1】：

试试这个 (reference)

export interface FooProps {
  children?: React.ReactElement<BarProps> | React.ReactElement<BarProps>[]
}

【讨论】：

我想你的意思是React.ReactElement<BarProps>[]？
如果Foo 的孩子需要完全严格地接受具有Bar 类型签名的组件，这将不起作用。尝试将一个简单的 h1 元素作为子元素渲染为 Foo (<Foo><h1>Hello</h1></Foo>)，您会发现编译器甚至不会抱怨。
我试过了，我仍然可以将非 Bar 组件作为 Foo 的子级传递，而不会出现编译器警告/错误
如果您在上面的参考资料中进一步阅读，您会看到“将消除错误，但不会正确地对子项进行类型检查”，我认为这是您最接近的get 用于限制 FooProps 接口。也许在组件的开头抛出错误或过滤错误的类型可以解决问题？