在React with Typescript中设置默认属性值可以通过两种方式实现:使用默认参数和使用 defaultProps。
import React from 'react';
interface MyComponentProps {
name: string;
age?: number;
}
const MyComponent: React.FC<MyComponentProps> = ({ name, age = 18 }) => {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
};
export default MyComponent;
在上面的例子中,age属性使用了默认参数语法,如果没有传入age属性,它的默认值将为18。
import React from 'react';
interface MyComponentProps {
name: string;
age?: number;
}
class MyComponent extends React.Component<MyComponentProps> {
static defaultProps = {
age: 18,
};
render() {
const { name, age } = this.props;
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
}
export default MyComponent;
在上面的例子中,通过设置静态属性defaultProps来定义默认属性值。如果没有传入age属性,它的默认值将为18。
这两种方式都可以在React with Typescript中设置默认属性值,具体选择哪种方式取决于你的组件是函数组件还是类组件。
领取专属 10元无门槛券
手把手带您无忧上云