Компоненты для начинающих (react)

Что делает фреймворк react таким интересным и гораздо лучшим, чем ванильный javascript, так это тот факт, что он построен на разделах вашего приложения, называемых компонентами. Эти компоненты представляют собой функции, которые возвращают то, что вы хотите, чтобы делала данная секция приложения, что приводит к гораздо более чистому коду. Но мы сосредоточимся на том, как мы передаем информацию от одного компонента к другому.

Что такое реквизит

Реквизит — это сокращение от свойства, и, как я уже сказал выше, он используется для передачи информации/данных от одного компонента к другому.

Давайте рассмотрим пример:

// PARENT COMPONENT

function ArticlePost() {
  return (
    <div>
      <ArticleContent articleText="Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" />
    </div>
  );
}

// CHILD COMPONENT

function ArticleContent(props) {
  return <div>{props.articleText}</div>;
}

В этом примере мы видим 2 компонента. Один из них родительский, а другой дочерний. Родительский компонент (ArticlePost) возвращает div, содержащий текст статьи. Когда мы переходим к дочернему компоненту (ArticleContent), мы можем использовать параметр props в качестве параметра, за которым следует return, содержащий (props.articleText). Это позволит коду понять, что мы хотим получить текст статьи из родительского компонента.

• ПРИМЕЧАНИЕ: Данные передаются только от родительского компонента к дочернему. Точно так же, как родитель говорит ребенку, что делать, а не наоборот.

Проверьте дважды:

console.log(props);
// => { articleText: "Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" }

Мы можем console.log props, чтобы увидеть, что он действительно ссылается на данные родительского компонента текста статьи.

Почему это полезно?

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

Зачем вообще передавать эти данные вниз, разве нельзя просто использовать оригинальный компонент?

Ну, у разных компонентов разные функции. Второй компонент может захотеть получить доступ только к части данных из первого компонента, чтобы заставить эти данные делать что-то еще.

Например, мы можем посмотреть здесь:

Есть родительский компонент, который хранит (isPublished), но мы перенесли его в дочерний компонент (BlogContent), чтобы мы могли манипулировать данными с помощью условного рендеринга. Если isPublished равно false (не опубликовано), то возвращаем null, чтобы пользователь не видел отображения элементов DOM. Но если он опубликован, отобразите следующее опубликованное содержимое (показанное в return. Возврат хочет показать пользователю текст статьи и минуты для чтения. Это более развернутый пример того, как и почему мы используем props для получения данных из родительской функции/компонента, чтобы использовать их в дочерней и манипулировать данными, чтобы показать то, что мы хотим.