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。