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

Компоненты React и дочерние элементы

В React компонент может иметь одного, много или не иметь дочерних элементов. Отлично, но подождите  —  что такое «дети»? Поясним на примере:

Компонент Profile имеет двух дочерних элементов: ProfileImage и ProfileDetails, а эти два не имеют дочерних элементов.

"В выражениях JSX, которые содержат как открывающий, так и закрывающий тег, содержимое между этими тегами передается как специальный реквизит: props.children"  —  Документация по React

По сути, props.children — это специальный реквизит, автоматически передаваемый каждому компоненту, который можно использовать для рендеринга содержимого, включенного между открывающим и закрывающим тегами при вызове компонента. Компоненты такого типа идентифицируются в официальной документации как «коробки».

Идентификация компонентов по синтаксису JSX

В JSX React компонент с дочерними элементами всегда идентифицируется открывающим и закрывающим тегами. Каждый дочерний элемент должен быть помещен между этими двумя тегами, как мы видели выше. Если у компонента нет дочерних элементов, вы можете вызвать его с помощью или , но последний синтаксис обычно предпочтительнее. Цель самозакрывающихся тегов — сделать код короче и удобнее для чтения.

props.children в Действиях

Предположим, что мы хотим создать компонент ImageSlider. Наша цель — вызвать компонент следующим образом:

Как видите, ImageSlider состоит из нескольких , к которым можно получить доступ и отобразить их через props.children.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

Благодаря props.children мы можем вкладывать наш контент внутрь компонента точно так же, как мы вкладываем обычные HTML-элементы.

Какие типы контента разрешены для props.children?

Содержимое, передаваемое компоненту через props.children, может включать

undefined, null, логическое значение, число, строка, элемент React или массив любого из этих типов рекурсивно. Это также может быть функция, возвращающая один из этих типов.

Обратите внимание, что, как указано в документации React, false, null, undefine и true являются допустимыми дочерними элементами, но они будут игнорироваться и не отображаться. Если вы хотите, чтобы отображались значения false, true, null или undef, вы должны сначала преобразовать их в строку:

  { String(undefined) }

Почему реквизит.дети так важен?

props.children позволяет нам составлять компоненты и, как следствие, наш внешний интерфейс; использование реальной мощи компонентной модели React.

"React имеет мощную модель композиции, и мы рекомендуем использовать композицию вместо наследования для повторного использования кода между компонентами". — Документация React

Как указано в официальной документации, иногда вам может потребоваться заполнить несколько «дыр» в компоненте. В таких случаях вместо использования props.children предпочтительным подходом может быть определение нескольких пользовательских реквизитов; как показано в следующем примере:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

Реагировать.Дети

"React.Children предоставляет утилиты для работы с непрозрачной структурой данных props.children" — Документация React

Почему props.children является «непрозрачной структурой данных»?

Поскольку props.children может состоять из одного, многих или ни одного дочерних элементов, что означает, что его значение может быть одним дочерним узлом, массивом дочерних узлов или не определено соответственно. Благодаря API React.Children мы можем легко работать с props.children, не принимая во внимание каждый из его возможных типов. К счастью, все будет сделано за нас в фоновом режиме.

На момент написания React.Children предлагает пять различных утилит:

• карта

• для каждого

• считать

• только

• toArray

Давайте посмотрим, как мы можем использовать React.Children на примере. Допустим, мы хотим добавить специальный класс CSS img-special-class к каждому из дочерних элементов компонента ImageSlider. Это можно сделать следующим образом:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map позволяет нам перебирать props.children и преобразовывать каждый элемент в соответствии с функцией, переданной в качестве второго параметра. Для достижения нашей цели мы использовали React.cloneElement. Это связано с тем, что нам нужно было изменить значение свойства className, но реквизиты являются неизменяемыми в React, поэтому нам пришлось клонировать каждого дочернего элемента.

Заключение

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

Надеюсь, эта статья поможет вам освоить композицию в React.

Пост «Полное руководство по реквизиту.детям в React» впервые появился на Writech.