React技巧之设置具有默认值的可选props
React技巧之设置具有默认值的可选props
chuckQu
发布于 2022-08-19 07:15:17
发布于 2022-08-19 07:15:17
代码可运行
运行总次数：0
代码可运行
原文链接：https://bobbyhadz.com/blog/react-optional-props-typescript[1]
作者：Borislav Hadzhiev[2]
正文从这开始~
总览
在React TypeScript中设置具有默认值的可选props：
- 用问号将类型上的
props标记为可选。 - 在函数定义中对
props进行解构时提供默认值。
详情
// App.tsx
interface EmployeeProps {
name?: string; // 👈️ marked optional
age?: number; // 👈️ marked optional
country: string; // 👈️ required (no question mark)
}
function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
return (
<div>
<h2>{name}</h2>
<h2>{age}</h2>
<h2>{country}</h2>
</div>
);
}
export default function App() {
return (
<div>
<Employee name="Bob" age={29} country="Belgium" />
<hr />
<Employee country="Austria" />
</div>
);
}
我们标记了name和age属性作为可选的。这意味着不管有没有提供这两个属性，组件都是可使用的。
如果可选prop的值没有指定，会默认设置为undefined。没有为prop指定值，和设置值为undefined的效果是相同的。
我们还在Employee组件的定义中为name和age参数设置了默认值。
function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
return (
<div>
<h2>{name}</h2>
<h2>{age}</h2>
<h2>{country}</h2>
</div>
);
}
对象中的name属性的默认值为Alice，所以如果不提供name prop，它将被赋值为Alice。
你也可以通过把props所有属性都标记为可选，来将整个props对象设置为可选。
// App.tsx
interface EmployeeProps {
name?: string; // 👈️ all marked optional
age?: number;
country?: string;
}
function Employee({
name = 'Alice',
age = 30,
country = 'Austria',
}: EmployeeProps) {
return (
<div>
<h2>{name}</h2>
<h2>{age}</h2>
<h2>{country}</h2>
</div>
);
}
export default function App() {
return (
<div>
<Employee name="Bob" age={29} country="Belgium" />
<hr />
<Employee />
</div>
);
}
EmployeeProps类型中的所有属性都被标记为可选的，因此该组件可以在不提供任何props的情况下使用。
我们为Employee组件的所有props设置了默认值，所以如果有任何props被省略了，就会使用默认值。
参考资料
[1]
https://bobbyhadz.com/blog/react-optional-props-typescript: https://bobbyhadz.com/blog/react-optional-props-typescript
[2]
Borislav Hadzhiev: https://bobbyhadz.com/about
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
React技巧之将useState作为字符串数组
更多 >
腾讯云开发者
