Это руководство для начинающих по использованию реквизита. Важно, чтобы вы понимали, что такое деструктуризация и как использовать/создавать компоненты перед прочтением.

Props, сокращение от свойств, реквизиты позволяют нам отправлять информацию от родительских компонентов к дочерним компонентам. Также важно отметить, что они могут иметь любой тип данных.

Обязательно понимать синтаксис создания реквизита для любого из ваших компонентов. В React вы должны использовать тот же синтаксис для написания атрибута для тега html. Мы указываем свойство, помещая его в наш элемент следующим образом:

ParentPlant() {
  return  
}

Хорошее правило, которое следует помнить при создании реквизита: строки не обязательно должны заключаться в фигурные скобки вокруг их значений, мы делаем это только для других типов данных. Как вы можете видеть выше, мы можем иметь множество реквизитов, назначив их родительскому компоненту. Когда у нас есть реквизиты внутри нашего компонента, важно знать, что мы технически передаем их. Как только мы передадим наши реквизиты, нам нужно будет иметь возможность получить их внутри желаемого компонента. В данном случае наш компонент ChildPlant.

Получение реквизита:

function ChildPlant(props) {
  return (
    
      {props.text} {props.number}
    >
  )
}

Здесь мы делаем следующее: 1. Мы получаем наш реквизит в параметре нашего компонента ChildPlant, 2. Мы деструктурируем значения нашего реквизита через имя нашего реквизита. Важно знать, что наш реквизит не является параметром, а скорее выполняет функции, похожие на него.

Единственный способ передать данные родительского компонента дочернему компоненту — через реквизиты. Мне нравится думать об этом как о ДНК: родительский компонент содержит аспекты самого себя, уже существующие внутри него. Поскольку этот ребенок также может иметь аспекты ДНК своего родителя, реквизит действует как активатор, который делает волосы этого ребенка красными, черными или светлыми.

Реквизиты принимаются в дочерней функции и отправляются через родительскую функцию, но реквизиты можно отправлять только вниз и никогда не отправлять обратно. Мы также можем думать о реквизите как о объектах. Это связано с тем, что они, по сути, содержат в себе данные, аналогичные парам ключ:значение. Возвращаясь к вопросу о том, почему они похожи на параметры, стоит отметить, что они хранят внутри себя несколько объектов. Мне нравится думать об области, где реквизит воспринимается как заполнитель. Они занимают место для какого-то объекта, который мы хотим использовать совместно с нашим компонентом, и заменяемы, когда нам это нужно, посредством деструктуризации и точечной записи.

Вот хороший способ визуализировать это:

Здесь мы можем визуализировать реквизиты, содержащие все в наших квадратных блоках, каждый из которых содержит соответствующее значение данных из нашего первого примера. Теперь мы просто используем наш метод деструктуризации, чтобы получить значение нашего свойства. Вот как в двух словах можно использовать реквизит!