Реквиты – это мощный инструмент для использования в реакции, но как вы эффективно их используете для написания надежных, надежных компонентов и приложений и приложений?
В этом руководстве мы будем рассматривать десять шаблонов, которые вы должны использовать при работе с реквизитами в реакции.
Мы не только прикоснемся к тому, что эти шаблоны и как их использовать, но вы увидите, как их использовать на своих практических, реальных примерах.
Давайте начнем!
Хотите вашу собственную копию? 📄
Нажмите здесь, чтобы загрузить ChechSheet в формате PDF (Это занимает 5 секунд).
Он включает в себя все необходимые данные здесь как удобное руководство PDF.
1. Реагистрационные реквизиты могут быть переданы условно
Оприфры, которые передаются компонентам, могут считаться как аргументы, которые передаются на функцию.
Если значения опоры не передаются определенным компонентом, ошибка не будет брошена. Вместо этого, в компоненте, который будет иметь значение undefined Отказ
Если вы хотели бы быть предупрежденным, когда значение не передается в качестве опоры для компонента, вы можете использовать инструмент, похожий на типы или Typescript, используя эти инструменты.
В простых реагированных, осознайте, что проходящие реквизиты могут быть чем-то, что вы забываете. Также вы можете не передавать определенную опору к компоненту, если вы так выберете.
2. Регистрационные реквизиты прошли только с их именем иметь значение правда
Каждый проп должен быть предоставлен связанное значение, которое предусмотрено после оператора Equals.
Но что происходит, когда мы не предоставляем, что равен оператору, а также значением?
Если вы просто укажете правильное имя на компоненте с ничем еще, вы передаете логическое значение True для этого присмотра компонента. Нет необходимости писать, что опора равен True.
Вместо этого вы можете просто включить значение SPOP, и ему будет дано логическое значение True, когда вы используете его в компоненте, к которому вы проходите.
3. Регистрационные реквизиты могут быть доступны как объект или разрушитель
Существует пара шаблонов, которые мы можем использовать для доступа к значению опоры в наших компонентах.
Реквиты могут быть доступны как целый объект, который обычно называют «реквизитами». Или они могут быть разрушены, поскольку реквизиты всегда будут объектом, в отдельные переменные.
Если у вас есть много реквизитов, которые вы передаете к вашему компоненту, может быть наилучшим образом включать их на весь объект реквизита и получить доступ к ним, говоря ropps.propname Отказ
Однако, если у вас есть только несколько реквизитов, которые вы передаете к вашему компоненту, вы можете немедленно разрушать их в рамках параметров вашего функционального компонента.
Вы можете использовать деструктурирование объектов ES6 для включения набора фигурных скобок в параметрах компонента вашей функции и сразу же захватывают свойства выключения объекта, а также объявить их в качестве отдельных переменных.
Это сокращает наш код и устраняет необходимость сказать ropps.propname получить ценность каждого реквизита.
4. Компоненты реагирования могут быть переданы как реквизиты (включая детей)
Мы видели, что реквизиты очень гибки, и если мы не пройдем их к компоненту, ошибка не будет брошена.
Эта гибкость также распространяется на то, что мы можем пройти как опоры. Не только элементы JSX могут быть переданы как реквизиты к компонентам, но мы также можем пройти другие компоненты в качестве реквизита.
На самом деле, существует особый тип опоры, который автоматически предоставляется на объекте реквизита, называемых дети Отказ
Дети опоры позволяют нам составлять наши компоненты мощными способами.
Это особенно полезно, когда нам нужно обернуть один компонент вокруг другого, например, для укладки, или пройти больше компонентных данных для компонентов детей, чтобы дать два примера:
- Детские реквизиты очень полезны, когда вы хотите сделать универсальный компонент макета и придавать ту же макет для всех компонентов, которые передаются как дети.
- Кроме того, дети полезны, когда вы хотите разместить провайдер контекста из контекста Ract React вокруг вашего компонентного дерева, чтобы легко предоставить то, что размещено в контексте поставщика для всех его дочерних компонентов, чтобы они могли получить те же данные.
5. Все может быть передано как опоры в реакции (особенно функциями)
Любое обычное значение JavaScript также может быть передано как реквизиты, включая функции.
Есть несколько мощных узоров, которые возникли из-за способности проходить функции как реквизиты. Очень распространенный рисунок передает функцию до дочернего компонента в качестве опоры, который может обновлять состояние родительского компонента, а затем вызывать его в этом дочернем компоненте.
Кроме того, существуют другие шаблоны, такие как рисунок рендеринга реквизита, который также включает в себя передачу функции вниз до дочернего компонента, затем называться обратно и выполнять некоторую межкомпонентную функцию.
6. Обновите значение RACT PROP с состоянием
Реквизиты не могут быть непосредственно обновлены.
Чтобы пропустить составное значение для компонента, мы не можем в том, что компоненту функции пытаются немедленно изменить значение этой опоры.
Мы знаем, что в реакции, если мы хотим изменить значения со временем, соответствующие средства для этого – это состояние.
Если мы хотели бы пройти в составной цене в компоненте и изменять его позже, мы можем предоставить ей застенчиво крюку для хранения этого значения в качестве переменной. Затем мы можем обновить его позже, используя соответствующую функцию сеттера. Мы можем сделать это с Уместите крючок или Успенсер Крюк, например.
7. Реагистрирование реквизита может быть распространено в индивидуально
Что, если у нас есть объект, чьи свойства, которые мы хотим пропустить как отдельные значения опоры?
Этот объект имеет много свойств, однако. Нужно ли вручную создавать отдельные реквизиты и установить опоры объект.propertyname. ?
Нет – вместо этого для каждого свойства мы можем очень легко взять объект и распространять свои свойства до компонента в качестве отдельных значений SPOR, используя оператор распространения объекта {... MyPropObject} Отказ
Используя этот синтаксис, который является функцией в ES7, он позволяет автоматически создавать отдельные реквизиты в соответствии с именами свойств объекта без необходимости писать все эти имена свойств.
Это очень удобно при работе с большими объектами с большим количеством свойств, мы хотим пройти как отдельные реквизиты к компоненту.
8. Регистрация React может быть дана значение по умолчанию, если нет
Что, если мы уже знаем, что мы передаем опоры в один экземпляр компонента, но мы не передаем это припорочно другому экземпляру?
Или, может быть, я знаю, что опора может не иметь значения. Что мы делаем, чтобы дать ему значение по умолчанию, а не только значение undefined Если его не передано значение Prop?
Если мы используем разрушительность доступа к тому, что PROP в нашей функциональной компоненте мы можем использовать оператор Equals, чтобы дать ему значение по умолчанию. Таким образом, если для этого опора не будет передано значение SPOP, мы можем использовать оператор AQUALAL рядом с ним и установить его на лучшее значение по умолчанию.
Установка значения по умолчанию очень важно, потому что нормальное значение по умолчанию для опоры – undefined Отказ Это может помочь нам избежать ошибок, которые могут возникнуть в результате нашего ожидаемого значения SPORT, не существующих там.
9. Регистрация React может быть переименована во избежание ошибок
Кроме того, что, если есть конфликт имена с одним из наших реквизитов?
Что, если мы уже будем использовать зовут по многим нашим компонентам, и мы видим, что в нашем компоненте есть другое значение, которое имеет одинаковое имя переменной?
Вместо того, чтобы охватить и переименовать все нашими нашими ценностями на все нашими экземплярами наших компонентов, мы можем просто использовать толстую кишку после этого зовут, если мы разрушили его, чтобы дать ему псевдоним.
Другими словами, мы даем это другое имя только в этом случае. Это позволит избежать конфликта имена, а также ошибки.
10. Не пытайтесь разрушать реквизиты React несколько раз
Если мы разрушаем объект от нашего объекта реквизита, осознайте, что можно разрушать, что он даже далее в его составных свойствах.
Однако обычно не рекомендуется делать это, если вы не уверены, что этот объект всегда будет иметь эти свойства.
Если один из этих свойств отсутствует, и вы пытаетесь разрушить его несколько уровней, он может дать вам довольно неприятную ошибку, когда вы пытаетесь получить доступ к свойству, которая не существует.
Обратите внимание, что вы можете использовать разрушительную настройку столько, сколько вы хотите, но это может быть трудно прочитать до определенной точки, и она также может быть ненадежной. Если вы пытаетесь получить доступ к собственности на объекте, который не может существовать, это приведет к ошибке.
Хотите сохранить это руководство для дальнейшего использования?
Нажмите здесь, чтобы загрузить чёртную таблицу в качестве полезного PDF .
Вот 3 быстрые победы, которые вы получаете, когда вы снимаете загружаемой версией:
- Вы получите тонны копироваемых фрагментов кода для легкого повторного использования в своих собственных проектах.
- Это отличное руководство по укреплению ваших навыков в качестве разработчика реагирования и для интервью на работу.
- Вы можете взять, использовать, печать, прочитать и перечитать это руководство буквально в любом месте, что вам нравится.
Оригинал: “https://www.freecodecamp.org/news/react-props-cheatsheet/”