- React Children是构建可复用组件的重要参数组成，在函数组件（FC）中内置定义了该参数，我们可以自行选择是否显式定义其可传递类型。在底层中children被定义为ReactNode，我们可以单一的显示定义我们需要的类型。
之前参加面试时，官人问到的一个问题：我们构建的组件中的children是什么？
- 当时我的第一想法就是Elment元素，DOM元素。
现在翻过头来滤清晰咯！下面就是一系列的源码定义啦。。。看源码是最直接的(当然好的解说能更加事半功倍，这个还需要再努力)。
1. 函数组件
// 源码中对于 FC 的定义(FC是一个泛型函数)，以及对 children 字段的定义
type FC<P = {}> = FunctionComponent<P>;
// 函数接口类型约束定义，只是interface FunctionComponent中propTypes等可选类型字段的定义
// 我暂时还没能理解是什么用法，在函数组件中是如何体现的
// 脑子今晚是懵住了，路过的大神有空敲两下的帮忙给评论区解答下呗。^_^。
interface FunctionComponent<P = {}> {
(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
propTypes?: WeakValidationMap<P> | undefined;
contextTypes?: ValidationMap<any> | undefined;
defaultProps?: Partial<P> | undefined;
displayName?: string | undefined;
}
type PropsWithChildren<P> = P & { children?: ReactNode | undefined };
// 对ReactNode类型定义的源码定义补充
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
type ReactChild = ReactElement | ReactText;
type ReactText = string | number;
type ReactFragment = {} | ReactNodeArray;
interface ReactNodeArray extends Array<ReactNode> {}
- 自定义children的传值类型，可自定义的类型是被包含于ReactNode类型中的，即上面代码中的对ReactNode类型定义的源码定义补充
- For example：定义为number或者boolean类型
// 函数组件定义，当children非必需时，可添加?使其可选
const ChildComp1: React.FC<{ data, children?: number | boolean }> = (props) => {
return (
<div>ChildComp1 content
<div>
{props.children || "props.children is undefined" }
</div>
</div>
)
}
// <ChildComp1 data={{name: "data", key: "ChildComp1-data"}} />
// <ChildComp1 data={{name: "data", key: "ChildComp1-data"}} children={20} />
// <ChildComp1 data={{name: "data", key: "ChildComp1-data"}}>{true}</ChildComp1>
// 类组件定义
- 还有一个我们经常用来定义children可传递值的类型，JSX.Element...
// 源码中对于JSX.Element的定义
declare global {
namespace JSX {
interface Element extends React.ReactElement<any, any> { }
// ...
}
}
2. 除了函数组件还有类组件，这个也是内部默认定义了可选字段children, 详细可进入源码查看
// 下面的定义即是class中对children的定义
// React.Props<T> is now deprecated, which means that the `children`
// property is not available on `P` by default, even though you can
// always pass children as variadic arguments to `createElement`.
// In the future, if we can define its call signature conditionally
// on the existence of `children` in `P`, then we should remove this.
readonly props: Readonly<P> & Readonly<{ children?: ReactNode | undefined }>;
本文TS类型残余疑惑： 关于本文中图一interface中的propTypes等可选字段定义用法;路过的大神指点下^_^
