В React реквизиты по умолчанию предоставляют способ установить начальные значения для реквизитов компонента, когда они явно не предоставлены родительским компонентом. Это особенно полезно в сценариях, где вы хотите гарантировать корректное поведение вашего компонента, даже если некоторые реквизиты отсутствуют. В этой статье мы рассмотрим различные методы использования свойств по умолчанию в компонентах класса React с помощью TypeScript. Так что пристегнитесь и начнем!

Метод 1: Инициализация свойств по умолчанию в компоненте класса
Один простой подход — определить значения свойств по умолчанию непосредственно внутри самого компонента класса. Этого можно добиться, присвоив объект статическому свойству defaultPropsвашего класса компонента. Вот пример:

class MyComponent extends React.Component<Props> {
  static defaultProps = {
    prop1: 'default value 1',
    prop2: 'default value 2',
  };
  // ...
}

Метод 2: использование функциональных компонентов с реквизитами по умолчанию
Если вы предпочитаете использовать функциональные компоненты, вы все равно можете использовать реквизиты по умолчанию, комбинируя вывод типа TypeScript с типом утилиты Partial. Вот пример:

type Props = {
  prop1: string;
  prop2: string;
};
const MyComponent: React.FC<Partial<Props>> = ({
  prop1 = 'default value 1',
  prop2 = 'default value 2',
}) => {
  // ...
};

Метод 3: условный рендеринг с реквизитами по умолчанию
В некоторых случаях вам может потребоваться условно отрисовать части вашего компонента на основе наличия или отсутствия определенных реквизитов. Этого можно добиться, используя реквизиты по умолчанию и логический оператор ИЛИ (||). Вот пример:

class MyComponent extends React.Component<Props> {
  static defaultProps = {
    prop1: 'default value 1',
    prop2: 'default value 2',
  };
  render() {
    const { prop1, prop2 } = this.props;
    return (
      <div>
        {prop1 || <p>Custom fallback for prop1</p>}
        {prop2 || <p>Custom fallback for prop2</p>}
      </div>
    );
  }
}

Метод 4: настройка реквизитов по умолчанию для тестирования
При написании тестов для ваших компонентов может быть полезно временно переопределить реквизиты по умолчанию для проверки различных сценариев. Один из подходов — создать отдельный объект для хранения ваших пользовательских реквизитов и объединить его с реквизитами по умолчанию. Вот пример:

class MyComponent extends React.Component<Props> {
  static defaultProps = {
    prop1: 'default value 1',
    prop2: 'default value 2',
  };
  render() {
    // ...
    const mergedProps = { ...MyComponent.defaultProps, ...this.props };
    // ...
  }
}

Свойства по умолчанию — это мощная функция в React, которая позволяет вам предоставлять резервные значения для свойств компонента. В этой статье мы рассмотрели несколько методов использования свойств по умолчанию в компонентах класса React с помощью TypeScript. Поняв и освоив эти методы, вы сможете повысить надежность и гибкость своих компонентов. Так что вперед, экспериментируйте со свойствами по умолчанию и сделайте свой опыт разработки React еще лучше!