这篇文章主要介绍了React组件props默认值怎么设置的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React组件props默认值怎么设置文章都会有所收获，下面我们一起来看看吧。
计算
安全
数据库
网络和加速
企业服务
interface IProps {
name: string;
age?: number;
}
const DefaultProps = (props: IProps) => {
const { age = 10, name } = props;
console.log(age + 10);
return <div />;
};这种情况应该是我们经常会写的一种方式，在解构props时对可选类型设置默认值，在hook组件中这种方法很简洁，但是在class组件中，凡是用到这些参数的方法，我们都需要设置一次默认值，组件复杂度比较高的时候，这样写就比较容易出错。
interface IProps {
name: string;
age?: number;
}
class DefaultProps extends Component<IProps, {}> {
func1() {
const { age = 10, name } = this.props;
//...
}
func2() {
const { age = 10, name } = this.props;
//...
}
render() {
return <div />;
}
}所以解构时设置默认值推荐在hook组件中使用，不推荐在class组件中使用
React的组件有一个属性defaultProps,我们可以通过这个属性来给组件设置默认参数。
比如类组件
interface IProps {
name: string;
age?: number;
}
class DefaultProps extends Component<IProps, {}> {
defaultProps = {
age: 20,
};
func1() {
const { age, name } = this.props;
}
func2() {
const { age, name } = this.props;
}
render() {
const { age, name } = this.props;
console.log(age); //20
return <div />;
}
}这样可以避免第一种类组件设置默认值时，需要在每个地方都单独设置的冗余情况，但是也带来了新的弊端，那就是即使设置了默认值，在使用的时候也不能推断出准确的类型，依然会提示变量有undefined的风险
所以，如果需要更准确的类型推断，这里还需要对类型进行额外的处理.
因为赋了默认值，我们希望能得到更准确的类型推断，所以我们可以将默认值的类型单独抽离，再合并到Props的类型中，以达到更好的类型推断.
interface IProps {
name: string;
age?: number;
}
class DefaultProps extends Component<Required<IProps>, {}> {
defaultProps: Partial<IProps> = {
age: 20,
};
render() {
const { age } = this.props;
console.log(age);
return <div />;
}
}这里我们将所有属性全部设置成可选，然后根据需要设置默认值，在初始化的时候将props设置为Required这样就能在使用时准确推断类型。
值得注意的是，这里没有检测是否所有可选类型都有默认值，如果所有的可选类型都需要默认值，可以再加上这样一个工具类型，筛选出所有可选类型。
type Filter<T> = {
[K in keyof T as undefined extends T[K] ? K : never]: T[K];
};于是代码变成了
interface IProps {
name: string;
age?: number;
sex?: string;
}
type Filter<T> = {
[K in keyof T as undefined extends T[K] ? K : never]: T[K];
};
class DefaultProps extends Component<Required<IProps>, {}> {
defaultProps: Required<Filter<IProps>> = {
age: 20,
sex:'male'
};
render() {
const { age } = this.props;
console.log(age);
return <div />;
}
}如果不写的话就会提示
关于“React组件props默认值怎么设置”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“React组件props默认值怎么设置”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7225816951212589117
