Основа React це компоненти. Ви можете вкладати компоненти один в одного так само, як ви вкладаєте один в одного HTML теги, що спрощує роботу з JSX, який власне і нагадує HTML.

Коли я вперше побачив React, то я подумав, що потрібно просто використовувати props.children. Але як же сильно я помилявся.

Так як ми працюємо з JavaScript, то ми можемо робити з дочірніми елементами (children) все, що завгодно. Ми можемо сміливо ставити їм конкретні властивості, вирішувати чи потрібно їх рендерити, ну і звичайно ж, управляти ними так, як нам треба. Давайте розглянемо всю красу роботи з  children на React.

Дочірні компоненти

Припустимо, що у нас є компонент  <Grid />, який може містити в собі компоненти  <Row />. Ми б написали це так:

<Grid>
  <Row />
  <Row />
  <Row />
</ Grid>

Ці три компоненти Row передаються компоненту Grid як props.children. Використовуючи контейнер для виразу (expression container це технічний термін для цих хвилястих дужок в JSX ) батьки можуть рендерити свої дочірні елементи:

class Grid extends React.Component {
  render ( ) { 
    return <div> { this.props.children } </ div>
  }
}

Батьківські елементи також можуть і не рендерити своїх нащадків або можуть робити з ними будь-які дії перед рендерингом. Для прикладу, цей компонент. <Fullstop /> взагалі не рендерить свої дочірні елементи:

class Fullstop extends React.Component {
  render ( ) { 
    return <h1> Hello world! </ h1>
  }
}

Абсолютно неважливо які дочірні елементи будуть передані цьому компоненту, він просто буде завжди показувати  "Hello world!" і нічого більше.

Зверніть увагу, що  h1 в прикладі вище рендерить свої дочірні елементи, в нашому випадку це  "Hello world!".

Дочірнім елементом може бути все, що завгодно

Children в React не обов'язково будуть компонентами, вони можуть бути всім, чим завгодно. Для прикладу, ми можемо передати нашому вищезазначеному компоненту  <Grid /> будь-який текст в вигляді  children і все буде прекрасно працювати:

<Grid> Hello world! </ Grid>

JSX автоматично видалить прогалини спочатку і наприкінці рядка, а разом з ними і порожні рядки. Також порожні рядки в середині строкового літерала перетворюються в один пробіл.

Це означає те, що всі ці приклади нижче відрендерять одне і теж:

<Grid> Hello world! </ Grid>
<Grid>
  Hello world!
</ Grid>
<Grid>
  Hello
  world!
</ Grid>
<Grid>
  Hello world!
</ Grid>

Ви також можете суміжно використовувати різні типи дочірніх елементів:

<Grid>
  Here is a row:
  <Row />
  Here is another row:
  <Row />
</ Grid>

Функція як дочірній елемент

Ми можемо передати будь-який вираз JavaScript, як дочірній елемент. І функції не виняток.

Щоб показати те, як це виглядає, подивіться на цей компонент, який виконує функцію, яка була передана як дочірній елемент:

class Executioner extends React.Component {
  render ( ) { 
    // Зверніть увагу на те, як ми викликаємо дочірній елемент, як функцію
    // ↓
    return this.props. children ( )
  }
}

Ви б могли викликати цей компонент так:

<Executioner>
  { ( ) => <H1> Hello World! </ H1> }
</ Executioner>

Це звичайно не зовсім придатний приклад, але він показує саму ідею.

Уявіть, що вам треба підтягнути будь-які дані з сервера. Ви могли б зробити це кількома способами, але це можливо зробити з цим  function-as-a-child  патерном:

<Fetch url = "api.myself.com" >
  { ( Result ) => <p> { result } </ p> }
</ Fetch>

Не переживайте, якщо код вище вас збентежив. Все, що я хотів зробити це те, щоб ви не здивувалися побачивши щось подібне в реальному житті. З  children можливо все.

Управління children

Якщо ви подивіться на документацію React, то ви побачите там, що " children це непрозора структура даних ". Насправді вони нам кажуть про те, що  props.children може бути будь-яким типом даних, наприклад таким як масив, функція, об'єкт і тп. Загалом, це може бути всім чим завгодно.

У React є кілька допоміжних функцій, які можуть допомогти керувати  children досить легко і без зайвих проблем. Доступні вони в  React.Children.

Проходимся циклом по children

Дві найбільш очевидних з вищезазначених функцій це React.Children.map і React.Children.forEach. Вони працюють так само як і їх колеги з методів масивів, за винятком того, що вони також працюють в момент передачі функції, об'єкта чи чогось ще безпосередньо в  children.

class IgnoreFirstChild extends React.Component {
  render ( ) { 
    const children = this.props.children
    return ( 
      <Div>
        { React.Children. map ( children, ( child, i ) => {
          // ігноруємо перший нащадок
          if ( i < 1 ) return 
          return child
        } ) }
      </ Div>
    )
  }
}

<IgnoreFirstChild /> компонент з коду вище, проходиться по всім своїм нащадкам, ігноруючи перший і повертаючи всіх інших.

<IgnoreFirstChild>
  <H1> First </ h1>
  <h1> Second </ h1> // <- Only this is rendered
</ IgnoreFirstChild>

У нашому випадку ми б могли також використовувати  this.props.children.map. Але щоб сталося у випадку, коли хто-небудь би передав функцію як нащадка? this.props.children був би функцією, а не масивом і ми б зловили помилку.

Але а з  React.Children.map це взагалі не буде проблемою:

<IgnoreFirstChild>
  { ( ) => <H1> First </ h1> } // <- Ignored?
</ IgnoreFirstChild>

Рахуємо children

Так як  this.props.children може бути абсолютно будь-яким типом даних, перевірка кількості нащадків у компонента може бути досить складним процесом. Наївно написавши this.props.children.length ви отримаєте 12, якщо станете перевіряти рядок "Hello World!", хоч там і буде один нащадок.

Саме тому у нас і є  React.Children.count:

class ChildrenCounter extends React.Component {
  render ( ) { 
    return <p> React.Children. count ( this.props.children ) </ p>
  }
}

Так ми отримаємо кількість нащадків, незалежно від їх типу даних:

// Renders "1"
<ChildrenCounter>
  Second!
</ ChildrenCounter>
// Renders "2"
<ChildrenCounter>
  <P> First </ p>
  <ChildComponent />
</ ChildrenCounter>
// Renders "3"
<ChildrenCounter>
  { ( ) => <H1> First! </ H1> }
  Second!
  <P> Third! </ P>
</ ChildrenCounter>

Конвертуємо children в масив

Ну і під кінець, якщо жоден з методів вище вам не підходить, то ви можете конвертувати children в масив за допомогою методу  React.Children.toArray. Це було б корисно в разі сортування, наприклад:

class Sort extends React.Component {
  render ( ) { 
    const children = React.Children. toArray ( this.props.children )
    return <p> { children. sort ( ) . join ( '' ) } </ p>
  }
}
<Sort>
  // Тут ми використовуємо контейнери виразів, щоб переконатися в тому, що наші рядки
  // передані як три окремих нащадка, а не як один рядок
  { 'Bananas' } { 'oranges' } { 'apples' }
</ Sort>

Приклад вище рендерить рядки, але вже відсортовані:

Зверніть увагу, щоReact.Children.toArray масив не містить нащадків з типом функція, а тільки  React.Element або рядки.

Один єдиний нащадок

Якщо ви згадаєте про попередньому компоненті  <Executioner />, то він працює з одним нащадком, який є функцією.

class Executioner extends React.Component {
  render ( ) { 
    return this.props. children ( )
  }
}

Ми можемо уточнити цю умову за допомогою  propTypes, що буде виглядати приблизно таким чином:

Executioner.propTypes = {
  children: React.PropTypes.func.isRequired,
}

Тут вийде повідомлення в консоль, яке в принципі буде проігноровано розробником. Замість цього ми можемо використовувати  React.Children.only всередині рендеру.

class Executioner extends React.Component {
  render ( ) { 
    return React.Children. only ( this.props.children ) ( )
  }
}

В цьому випадку відрендериться тільки один єдиний нащадок в this.props.children. Якщо їх буде більше, ніж один, то нам викине помилку, отже, робота додатку буде припинена.

Редагування children

Ми можемо рендерити довільні компоненти як children. Але продовжувати контролювати їх з батьків, а не з компонента з якого ми їх рендеримо. Давайте подивимося на цей момент уважніше. Уявімо, що у нас є компонент RadioGroup, який може включати в себе декілька компонентів  RadioButton. (які  рендерять <input type="radio">)

RadioButton'и НЕ рендяряться з  RadioGroup самі по собі, а використовуються як Children. Що говорить про те, що десь в нашому додатку у нас є такий код:

render ( ) { 
  return (
    <RadioGroup>
      <RadioButton value = "first" > First </ RadioButton>
      <RadioButton value = "second" > Second </ RadioButton>
      <RadioButton value = "third" > Third </ RadioButton>
    </ RadioGroup>
  )
}

У цьому коді є невелика проблемка. Інпути не згруповані, що призводить до такого результату:

Щоб їх згрупувати їм всім потрібно мати однаковий атрибут name. Ми б звичайно могли б відразу призначити name кожному  RadioButton:

<RadioGroup>
  <RadioButton name = "g1" value = "first" > First </ RadioButton>
  <RadioButton name = "g1" value = "second" > Second </ RadioButton>
  <RadioButton name = "g1" value = "third" > Third </ RadioButton>
</ RadioGroup>

Але це нудно і можливо призведе до помилок. Але ж у нас в руках вся сила JavaScript! Чи можемо ми використовувати її, щоб автоматично вказати  RadioGroup потрібне нам  name для всіх його children?

Міняємо props у Children

Отже, в  RadioGroup ми додамо новий метод під назвою renderChildren, який буде редагувати пропси у children:

class RadioGroup extends React.Component {
  constructor ( ) { 
    super ( )
    this.renderChildren = this.renderChildren. bind ( this )
  }
  renderChildren ( ) { 
    return this.props.children
  }
  render ( ) { 
    return ( 
      <div className = "group" >
        { This. renderChildren ( ) }
      </ Div>
    )
  }
}

Давайте пробіжимося по всіх нащадках, щоб отримати кожного з них окремо:

renderChildren ( ) { 
  return React.Children. map ( this.props.children, child => {
    return child
  } )
}

Відмінно, але як тепер ми можемо редагувати їх властивості?

Імутабельно клонуємо елементи

І ось тут в гру вступає останній допоміжний метод. Як і мається на увазі під його назвою,  React.cloneElement клонує елемент. Ми передаємо йому елемент, який бажаємо скопіювати, як перший аргумент, а потім другим аргументом передаємо об'єкт з пропсами, які повинні бути виставлені вже склонованому елементу:

const cloned = React. cloneElement ( element, {
  new: 'yes!'
} )

Тепер елемент cloned матиме пропс new зі значенням  "yes!".

І це саме те, що нам потрібно для завершення RadioGroup. Ми клонуємо кожного нащадка і виставляємо йому пропс name зі значенням  this.props.name.

renderChildren ( ) { 
  return React.Children. map ( this.props.children, child => {
    return React. cloneElement ( child, {
      name: this.props.name
    } )
  } )
}

Останнім кроком ми передамо унікальний  name до  RadioGroup:

<RadioGroup name = "g1" >
  <RadioButton value = "first" > First </ RadioButton>
  <RadioButton value = "second" > Second </ RadioButton>
  <RadioButton value = "third" > Third </ RadioButton>
</ RadioGroup>

Працює! Замість вказувати вручну атрибути для кожного RadioButton, ми просто можемо вказати RadioGroup те, що нам потрібно, щоб було name і далі він подбає про це.

Висновок

Children змушують компоненти в React поводитися як елементи розмітки, а не окремі об'єкти. Використовуючи силу JavaScript і деякі допоміжні функції React, ми можемо сміливо з ними працювати для створення декларативних API і взагалі для спрощення в цілому робочого процесу.

Джерело перекладу