Как предотвратить построение приложения, если типы компонентов компонента недопустимы?

Вот пример для PropTypes:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Теперь я использую компонент Greeting как:

<Greetings otherProp="this is a invalid prop" />

В этом случае, когда я создаю приложение для развертывания, не выдается никакой ошибки, и приложение успешно создается. Но это дает ошибку во время выполнения и ломается.

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

Ответы

Ответ 1

Ваш вопрос возникает из-за неправильного понимания цели и реализации PropTypes. PropTypes существует, чтобы обеспечить настраиваемые проверки во время выполнения использования API. Они не выполняют статический анализ кода, а проверяют использование во время выполнения.

Чтобы обеспечить дополнительный контекст, концепция предшествует широкому использованию многих инструментов статического анализа. Кроме того, даже с введением этих инструментов некоторые предпочитают подходы проверки во время выполнения. Одной из причин этого может быть сохранение простоты цепочки инструментов. Проверка PropTypes работает в обычном JavaScript без каких-либо дополнительных инструментов или языков. Однако, поскольку вы используете JSX и, следовательно, уже имеете сложную цепочку инструментов, включающую несколько языков, это соображение менее актуально. Тем не менее, еще одна причина использования PropTypes заключается в том, что если вы создаете библиотеку, вы все равно можете предоставить пользователям уровень проверки, не требуя от них того же или любого другого из выбранных вами инструментов статического анализа.,

Если вы хотите проверить правильность своего кода перед его запуском, вам следует использовать инструмент статического анализа. Есть много вариантов, и вы можете использовать несколько инструментов, но некоторые примеры включают TypeScript, Flow и Closure Compiler.

Обратите внимание, что любой из этих вариантов статического анализа по определению ортогональн к PropTypes и поэтому может использоваться вместе с ними свободно.

Ответ 2

Моя личная рекомендация - использовать инструмент статического анализа кода, как упоминал Алуан Хаддад.

Если вы не хотите использовать инструмент статического анализа кода, вы можете попытаться сделать код неудачным на тестах, используя такой инструмент, как https://github.com/esphen/jest-prop-type-error. Но это подразумевает, что у вас должны быть тесты, полностью охватывающие интеграцию между различными компонентами.

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

Ответ 3

Идея реакции - это компонентная база. Prop-types - это проверка типов во время выполнения для объектов React и подобных объектов. Вы можете использовать prop-types для документирования предполагаемых типов свойств, передаваемых компонентам.

В компоненте Greeting, если вам нужно name как реквизит, вы должны определить его для типов реквизита. Если name требуется, вы определяете это обязательно:

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

Чтобы использовать Greeting, вы просто позвоните ему и передадите ему реквизит. Я не думаю, что нам нужно проверять, что мы передаем в компонент Greeting.