Как визуализировать функциональный компонент с реквизитом или резервным значением по умолчанию.
Привет, мир! Я здесь впервые, и я так же взволнован, как и опасаюсь. Я только что закончил программу General Assembly Software Engineering Immersive и очень вдохновлен новым сообществом, в которое я вступил. По пути в кампус и обратно я провел много времени за чтением статей на Medium. Все они были очень полезными, и я хотел попытаться отблагодарить сообщество.
Я начинающий программист и определенно не писатель. Поэтому я надеюсь, что это будет полезно, и мы будем признательны за любой отзыв.
Компоненты
Центральная предпосылка React — это компоненты. Компоненты позволяют нам разбивать части веб-приложения на небольшие модульные части. Это проще в управлении, повторном использовании и объединении. Это становится чрезвычайно полезным на крупномасштабных сложных сайтах.
Каждый компонент может отображаться со своим собственным содержимым, представлением, данными и поведением. То, как компонент отображается, зависит от состояния, определяемого этим компонентом, и/или свойств, переданных ему от родительского компонента.
Реквизит
Характеристики. Способ, которым дочерние компоненты получают данные от родительских компонентов и позволяют отображать разные экземпляры одного и того же компонента.
Ниже приведен синтаксис для передачи реквизита с именем message функциональному компоненту Spinner.
Доступ к компоненту осуществляется через объект реквизита и с определенным именем ключа.
А что, если мы решим использовать этот компонент счетчика где-то еще в нашем приложении, где не требуется пользовательское сообщение?
|| Оператор
Раньше для этого я использовал логический оператор || как показано ниже. Это следует тому же принципу, что и ванильный javascript, но в отношении рендеринга первое значение || оператор для оценки как true, возвращается и, следовательно, отображается.
Но, как вы, вероятно, можете себе представить, по мере того, как наши компоненты становятся более сложными, этот процесс может затруднить понимание нашего кода.
Введите реквизиты по умолчанию
В этом примере я создаю базовую функцию счетчика, которая принимает сообщение в качестве опоры для отображения или, если опора не предоставлена, она будет использовать резервное значение по умолчанию.
Этот процесс делает ваш код более элегантным, а компоненты — более гибкими. Кроме того, сведение к минимуму риска взлома некоторого кода.
Под функциональным компонентом мы добавляем к компоненту статическое свойство defaultProps и определяем значения объекта. Синтаксис для этого важен.
- Имя объекта должно совпадать с именем компонента
- Далее по умолчаниюProps
- Тогда ключ объекта должен быть таким же, как реквизит, указанный в JSX.
Внутри компонента мы ссылаемся на объект prop, где вы хотите, чтобы значение отображалось, как обычно. Обратите внимание на || оператор не использовался.
Теперь независимо от того, визуализируем ли мы компонент с поддержкой сообщения или без нее, мы всегда будем отображать значение.
Результат
С реквизитом сообщения
Без реквизита сообщения и с использованием реквизита по умолчанию
Спасибо за прочтение. Пожалуйста, дайте мне знать, было ли это полезно или, что более важно, если я что-то напутал, чтобы я мог продолжать учиться.
