Как сделать свойство обязательным в React Component?

Question

Есть ли лучшая практика, чтобы сделать свойство обязательным в React Component?

Также есть ли в любом случае установить свойства не обнуляемые, так что это не будет null или undefined?

Answer 1

Если они обязательны, вы можете проверить свойства в constructor или componentDidMount или getDerivedStateFromProps методах жизненного цикла компонента и обработать их там.

Или использовать по умолчаниюprops , что автоматически устанавливает значения для undefined props (null обрабатывается как значение)

Answer 2

Зависит от желаемого поведения.

Обычный способ - использовать типы поддержки React, как уже упоминалось в других ответах.Они приводят к появлению предупреждения (хотя и выводятся как ошибка консоли) в режиме разработки, в то время как они не работают в рабочей среде.

Не существует существующего типа, не допускающего обнуление, поэтому он может бытьПользовательская функция типа проп:

const nullablePropType = (props, propName, componentName)  => {
  if (props[propName] == null)
    return new Error('Prop `' + propName + '` is nullable in `' + componentName + '`.');
};

const Foo = props => ...;
Foo.propTypes = { bar: nullablePropType };

Answer 3

React имеет некоторые встроенные возможности проверки типов, используя пакет prop-types ( Подробнее )

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    const myProp = this.props.myProp;
    return (
      <div>
      </div>
    );
  }
}

MyComponent.propTypes = {
  myProp: PropTypes.string.isRequired
};

Имейте в виду, что эта проверка типов выполняется только в режиме разработки.