子属性会被覆盖吗?

Question

我有以下React组件:

export default function ElevationScroll({children}: PropsWithChildren<{ children: ReactElement }>) {
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0
});

return React.cloneElement(children, {
elevation: trigger ? 3 : 0,
});
}

和有一个关于参数定义{children}: PropsWithChildren<{ children: ReactElement }>的问题。

首先看PropsWithChildren

的定义

type PropsWithChildren<P> = P & { children?: ReactNode };

在component参数中，我传递了{ children: ReactElement }作为泛型类型，它扩展为:

type PropsWithChildren<{ children: ReactElement }> = { children: ReactElement } & { children?: ReactNode };

为什么允许两次定义属性children?

Answer 1

首先，让我们看看什么是NOT允许:

提示:{a:string} & {a:number}results typenever

type Prop<P> = P & { a: number };
// {a: string} & { a: number } = never
const bad: Prop<{a:string}> = {a: '5'} // Type 'string' is not assignable to type 'never'

但是，当两种类型相关时，它可以工作:

// { a: Number } & { a: number } 
const obj: Prop<{a:Number}> = {a: 5} // GOOD

---

ReactNode和ReactElement的关系也是如此(ReactElement是"严格的"):

• React.ReactNode:组件的返回值(可以返回字符串"hello")
• React.ReactElement:返回React.createElement的值(不能返回字符串"hello")

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
type ReactChild = ReactElement | ReactText;
// Therefore
type ReactNode = ReactElement | ....