Проверка свойств ReactJS
Я перехожу от ReactJs к React-Native и обнаружил эту структуру функции в коде facebook для кнопки реагирования:
class Button extends React.Component<{
title: string,
onPress: () => any,
color?: ?string,
hasTVPreferredFocus?: ?boolean,
accessibilityLabel?: ?string,
disabled?: ?boolean,
testID?: ?string,
}> {
static propTypes = {
/**
* Text to display inside the button
*/
title: PropTypes.string.isRequired,
/**
* Text to display for blindness accessibility features
*/
accessibilityLabel: PropTypes.string,
/**
* Color of the text (iOS), or background color of the button (Android)
*/
color: ColorPropType,
/**
* If true, disable all interactions for this component.
*/
disabled: PropTypes.bool,
/**
* TV preferred focus (see documentation for the View component).
*/
hasTVPreferredFocus: PropTypes.bool,
/**
* Handler to be called when the user taps the button
*/
onPress: PropTypes.func.isRequired,
/**
* Used to locate this view in end-to-end tests.
*/
testID: PropTypes.string,
};
...
}
В ReactJS я просто собирал свои компоненты с проверкой propTypes, поэтому:
a) Какова цель помещения спецификации props в скобки в определении класса (<{...}>? Доступно ли это также в обычном ReactJS?
б) Будет ли это проверять переданный формат свойств? Если да, то зачем мне здесь propTypes?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Для ясности правильный термин для определения в скобках называется универсальным, что похоже на аргумент типа, когда функция / класс / что-то не знает, какой тип чего-либо, поэтому он позволяет вам заполнить пробелы - в в данном случае это тип свойств компонента.
В частности, этот синтаксис выглядит как Поток, но Машинопись также является популярным вариантом для проверки типов.
Так:
- Общий используется для проверки типа с использованием вашего компонента во время компиляции. Это синтаксис, специфичный для средств проверки типов, и он недоступен в обычном JS.
propTypesиспользуется для проверки типов во время выполнения, чтобы улучшить DX для людей, которые не используют систему типов.
Как правило, проекты с системами типов предпочитают использовать общий тип только для уменьшения многословности. Если вы используете систему типов, propTypes действительно нужен только в том случае, если вы публикуете компонент.
Facebook использует Поток (вы можете увидеть комментарии в верхней части исходного кода) для статического анализа. Вы можете использовать Typescript или любой другой анализатор. Основная цель определения типов props - предотвратить ошибки программирования. Узнать больше здесь
Компонент React принимает 2 общих параметрыReact.Component<PropType, context> {}.
- Типы опор
- Контекст
Также React.Component имеет некоторые статические свойства, такие как
propTypes, который определяет, какие реквизиты может принимать этот компонент.defaultPropsопределяет значения свойств по умолчанию, если они не передаются от родителя.
Переходя к вашему вопросу:
What is the purpose of having the props specification inside the brackets at the class definition <{...}>?
Чтобы определить, какие свойства может принимать компонент, для статического анализа и создания отчетов об ошибках для требуемых свойств, если они не переданы.
Is this available also in normal ReactJS?
Да (вам нужно будет добавить в свой проект Flow или TypeScript)
Will that check the passed properties format. If so, why do I need propTypes here??
Да, в некоторых случаях, когда тип свойств не может быть определен во время компиляции, было бы полезно увидеть любые предупреждения, сгенерированные при использовании propTypes. Кредит