React 组件字段 defaultProps 可以为 React 组件添加默认 props。这一般用于 props 未赋值,但又不能为 null 的情况。
无论是 class component 还是 function component 都存在这个属性字段。
🌈 Class Component
type GreetProps = typeof Greet.defaultProps & {
age: number;
};
class Greet extends React.Component<GreetProps> {
static defaultProps = {
age: 21,
};
/*...*/
}
// static 属性值可以被提到 class 外部,因此也可以写为:
Greet.defaultProps = { age:21 };
// Type-checks! No type assertions needed!
let el = <Greet age={3} />;
🌈 Function Component
// using typeof as a shortcut; note that it hoists!
// you can also declare the type of DefaultProps if you choose
// e.g. https://github.com/typescript-cheatsheets/react/issues/415#issuecomment-841223219
type GreetProps = { age: number } & typeof defaultProps;
const defaultProps = {
age: 21,
};
const Greet = (props: GreetProps) => {
// etc
};
Greet.defaultProps = defaultProps;
React 组件默认值及 TS 配置
React 组件默认值配置
React 组件字段
defaultProps
可以为 React 组件添加默认 props。这一般用于 props 未赋值,但又不能为 null 的情况。 无论是 class component 还是 function component 都存在这个属性字段。🌈
Class Component
🌈 Function Component
👋 goodBye
defaultProps
根据 👉 这条推文,
defaultProps
最终将被弃用。目前的共识是使用对象默认值。🌈 Class Component
🌈 Function Component
深层 props 对象的默认赋值
对于简单的 props 对象,我们可以通过解构赋值。但对于深层嵌套对象而言,单层解构赋值会存在以下情况:
b 默认属性赋值如上,但在传参过程中传递了
b: {b1: 5}
,则上面 b 属性就会被判别为已赋值,默认赋值的完整对象被覆盖。因此当我们访问b.b2
时返回 undefined🌈 对于深层嵌套对象,我们可以编写函数递归执行默认赋值,但通常情况下,我们可以声明一个
defaultProps
常量,在需要默认值判别处调用defaultProps
内部的属性字段即可。🔥
lodash.defaultsDeep
使用方法:默认项在后,目标项在前。目标项中已存在的字段不会被覆盖,目标项中未定义(undefined)的字段,将从后续项中取值填补,若存在多个后续项,则依次寻找字段填补直至遇到第一个可用值为止。
👉 注意:不要将 React Component props 直接应用于
_.defaultsDeep()
函数,这将不起作用,原因未知。为 React props 赋予深层默认值的方法如下:👋
lodash.defaultsDeep
函数默认赋值存在的问题lodash.defaultsDeep
会递归进行默认赋值,但当递归的元素为数组时,该函数会遍历数组内的各个元素。假如传参中嵌套数组的长度与默认对象嵌套数组长度不同,则结果是合并而非替换。