React Props: Базовые принципы

Компоненты React:

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

• Компоненты, как лучшая практика, создаются с раздельной функциональностью и назначением.

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

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

Реквизиты:

Реквизиты играют важную роль в передаче значений между компонентами.

Хотя компоненты React представляют собой отдельные части функционального кода, когда они используются в комбинации для поддержки приложения, эти компоненты должны иметь возможность обмениваться значениями (или аргументами) друг с другом! Реквизиты позволяют передавать значения от одного компонента к другому. Однако важно помнить, что информация через Props позволяет передавать значения от родительского компонента к дочернему. Иными словами, обмен реквизитами является однонаправленным. Реквизиты могут передаваться от дочернего компонента к родительскому, но это происходит через вызовы функций, и аргументы функций — это то, что получает родительский компонент. Это тема для другой статьи блога, а эта статья посвящена передаче реквизитов от родителя к ребенку.

Обзор реквизитов:

Некоторые ключевые синтаксические понятия, которые необходимо усвоить:

Реквизиты передаются компонентам через атрибуты HTML, поэтому мы записываем реквизиты, которые хотим передать дочерним компонентам, в том же синтаксисе, что и атрибуты HTML.

Значениями реквизитов могут быть объект, целое число, строка, булево число, массив и даже функция!

Пример:

Для наглядности рассмотрим следующий пример: У нас есть приложение, родительский компонент которого должен передать дочернему компоненту реквизит — имя в виде строкового объекта.

function ParentComponent() {
return (
<ChildComp name="Jake"/> //the prop called "name" is written as we would an attribute for an HTML tag and given the value "Jake"
)
}

Теперь мы можем получить доступ к реквизиту в дочернем компоненте:

function ChildComponent(props) {
//now we can access the prop!
return(
<div>
"Hi {props.name}!" {/* Note how to access the 'Props' is accessed as you would a key-value pair! */}
</div>
);
}

Доступ к нескольким реквизитам

Но что если у нас несколько реквизитов? Вы можете использовать то же соглашение о написании реквизитов (как вы бы написали атрибуты HTML), как вы видели в предыдущем примере, для каждого дополнительного реквизита, который вы хотите указать. Для доступа к этим реквизитам, так же как и к объекту с несколькими парами ключ-значение, вы будете обращаться к реквизитам, используя точечную нотацию в дочернем компоненте.

function ParentComp() {
return (
<ChildComp name="Jake" hometown="Boise"/>
)
}

function ChildComp(props) {
return(
<div>
"Hi {props.name}!" {/* To access the 'name' we use dot notation to access the name value */}
"Are you from {props.hometown}?" {/* the same format is used to access the 'hometown' value */}
</div>
);
}

Деструктуризация реквизита:

В предыдущих примерах мы передавали дочернему компоненту простые значения (в виде строк) с помощью реквизитов. В реальных приложениях это может быть и не так. У вас может быть дочерний компонент, который должен принимать простое постоянное значение.

Однако полезность и сила React заключается в возможности родительских компонентов (разумеется, с помощью разработчика) передавать только ту информацию, которая нужна дочернему компоненту.

Возьмем для примера приложение, которое отображает изображения картин, и полная запись объекта изображения выглядит примерно так:

{
"objectID": 436532,
"isHighlight": true,
"primaryImage": "https://images.metmuseum.org/CRDImages/ep/original/DT1502_cropped2.jpg",
"primaryImageSmall": "https://images.metmuseum.org/CRDImages/ep/web-large/DT1502_cropped2.jpg",
"department": "European Paintings",
"objectName": "Painting",
"title": "Self-Portrait with a Straw Hat (obverse: The Potato Peeler)",
"artistDisplayName": "Vincent van Gogh",
"artistDisplayBio": "Dutch, Zundert 1853–1890 Auvers-sur-Oise",
"artistNationality": "Dutch",
"artistBeginDate": "1853",
"artistEndDate": "1890",
"objectDate": "1887"
"medium": "Oil on canvas",
"dimensions": "16 x 12 1/2 in. (40.6 x 31.8 cm)",
}

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

Деструктуризация реквизита.

Чтобы вывести изображение в DOM, дочернему реквизиту может понадобиться только название картины и url изображения. Вместо того чтобы передавать дочернему компоненту все значение объекта, вы можете деструктурировать свой реквизит и передать только ту информацию, которая нужна дочернему компоненту.

function ParentComp() {
   return (
       <ChildComp imageUrl={paintingObj.primaryImage}  imageTitle={prop.title}/>
   )
}

function ChildComp(imageUrl, imageTitle) {
   //compare to the previous example, where we pass down "Props"
   //here we have explicitly called out the prop key from the parent component

   return(
       <div>
           <h1>{imageTitle}</h1>
           <img class="img" src={imgObj.primaryImage}/>
       </div>
   )
}

И мы ожидаем увидеть это:

(Вы также можете прочитать больше о реквизитах здесь )

Счастливого кодинга!