react如何设置组件默认值
设置组件默认值的常用方法
在React中，可以通过多种方式为组件设置默认值，以下是几种常见的方法：
使用defaultProps
类组件中可以使用defaultProps属性来定义默认值：
class MyComponent extends React.Component {
static defaultProps = {
name: 'Guest',
age: 18
};
render() {
return <div>{this.props.name}, {this.props.age}</div>;
}
}函数组件默认参数
函数组件可以直接在参数解构时设置默认值：
function MyComponent({ name = 'Guest', age = 18 }) {
return <div>{name}, {age}</div>;
}使用逻辑或运算符
可以在渲染时使用逻辑或运算符||提供回退值：
function MyComponent(props) {
const name = props.name || 'Guest';
const age = props.age || 18;
return <div>{name}, {age}</div>;
}结合TypeScript使用
如果使用TypeScript，可以在接口定义中设置默认值：
interface Props {
name?: string;
age?: number;
}
function MyComponent({ name = 'Guest', age = 18 }: Props) {
return <div>{name}, {age}</div>;
}状态管理的默认值
对于使用useState的组件状态，可以设置初始值作为默认值：
function MyComponent() {
const [name, setName] = useState('Guest');
const [age, setAge] = useState(18);
return <div>{name}, {age}</div>;
}选择哪种方法取决于具体场景和组件类型，函数组件推荐使用解构默认参数的方式，类组件则适合使用defaultProps。
