![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_8qVzwdrogSF1hK-plv86bw.png\")
В этой статье мы погрузимся в работу с children на React и узнаем как можно с ними работать на реальных примерах.
Основа React это компоненты. Вы можете вкладывать компоненты друг в друга также, как вы вкладываете друг в друга HTML теги, что упрощает работу с JSX, который собственно и напоминает HTML.
\n\n\n\nКогда я впервые увидел React, то я подумал, что нужно просто использовать props.children и дело в шляпе. Но как же сильно я ошибался.
Так как мы работаем с JavaScript, то мы можем делать с дочерними элементами (children) буквально всё, что угодно. Мы можем смело задавать им конкретные свойства, решать нужно ли их рендерить, ну и конечно же, управлять ими так, как нам надо. Так что дело это полезное и уж давайте при случае как можно глубже познаем всю прелесть работы с children на React.
Поехали!
\n\n\n\nПредположим, что у нас есть компонент <Grid />, который может содержать в себе компоненты <Row />. Мы бы написали это так:
<Grid>\n <Row />\n <Row />\n <Row />\n</Grid>Эти три компонента Row передаются компоненту Grid как props.children. Используя контейнер для выражения (expression container это технический термин для этих волнистых скобок в JSX) родители могут рендерить свои дочерние элементы:
class Grid extends React.Component {\n render() {\n return <div>{this.props.children}</div>\n }\n}Родительские элементы также могут и не рендерить своих потомков или могут производить с ними какие-либо действия перед рендерингом. Для примера, этот компонент. <Fullstop /> вообще не будет рендерить свои дочерние элементы:
class Fullstop extends React.Component {\n render() {\n return <h1>Hello world!</h1>\n }\n}Совершенно неважно какие дочерние элементы будут переданы этому компоненту, он просто будет всегда показывать \"Hello world!\" и ничего более.
Обратите внимание, что h1 в примере выше рендерит свои дочерние элементы, в нашем случае это \"Hello world!\".
Children в React не обязательно быть компонентами, они могут быть всем, чем угодно. Для примера, мы можем передать нашему вышеупомянутому компоненту <Grid /> какой-либо текст в виде children и всё будет прекрасно работать:
<Grid>Hello world!</Grid>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_BMyhht5dTdh2ncWJLdLezA.png\")
JSX автоматически удалит пробелы вначале и конце строки, а вместе с ними и пустые строки. Также пустые строки в середине строкового литерала преобразуются в один пробел.
\n\n\n\nЭто означает то, что все эти примеры ниже отрендерят одно и тоже:
\n\n\n\n<Grid>Hello world!</Grid>\n\n<Grid>\n Hello world!\n</Grid>\n\n<Grid>\n Hello\n world!\n</Grid>\n\n<Grid>\n\n Hello world!\n</Grid>Вы также можете смежно использовать разные типы дочерних элементов:
\n\n\n\n<Grid>\n Here is a row:\n <Row />\n Here is another row:\n <Row />\n</Grid>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_g2Uq7Sd2nUKpCceozwKqjw.png\")
Мы можем передать любое JavaScript выражение, как дочерний элемент. И функции не исключение.
\n\n\n\nЧтобы показать то, как это выглядит, посмотрите на этот компонент, который выполняет функцию, которая была передана как дочерний элемент:
\n\n\n\nclass Executioner extends React.Component {\n render() {\n // Обратите внимание на то, как мы вызываем дочерний элемент, как функцию?\n // ↓\n return this.props.children()\n }\n}Вы бы могли вызвать этот компонент так:
\n\n\n\n<Executioner>\n {() => <h1>Hello World!</h1>}\n</Executioner>Это конечно не совсем пригодный пример, но он показывает саму идею.
\n\n\n\nПредставьте, что вам надо подтянуть какие-либо данные с сервера. Вы могли бы сделать это несколькими способами и это возможно сделать с этим function-as-a-child паттерном:
\n\n\n\n<Fetch url=\"api.myself.com\">\n {(result) => <p>{result}</p>}\n</Fetch>Не переживайте, если код выше смутил вас. Все, что я хотел сделать это то, чтобы вы не удивились увидев нечто подобное в реальной жизни. С children возможно всё.
Если вы посмотрите на документацию React, то вы увидите там , что “children это непрозрачная структура данных”. На самом деле они нам говорят о том, что props.children может быть любым типом данных, например таким как массив, функция, объект и тп. В общем, это может быть всем чем угодно.
В React есть несколько вспомогательных функций, которые могут помочь управлять children довольно легко и без лишних заморочек. Доступны они в React.Children.
Две самых очевидных из вышеупомянутых функций это React.Children.map и React.Children.forEach. Они работают так же как и их коллеги из методов массивов, за исключением того, что они также работают в момент передачи функции, объекта или чего-нибудь ещё непосредственно в children.
class IgnoreFirstChild extends React.Component {\n render() {\n const children = this.props.children\n return (\n <div>\n {React.Children.map(children, (child, i) => {\n // игнорируем первого потомка\n if (i < 1) return\n return child\n })}\n </div>\n )\n }\n}<IgnoreFirstChild /> компонент из кода выше, проходится по всем своим потомкам, игнорируя первый и возвращая всех остальных.
<IgnoreFirstChild>\n <h1>First</h1>\n <h1>Second</h1> // <- Only this is rendered\n</IgnoreFirstChild>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_XAaXg_Pz8VUymyCAOAXoVw.png\")
В нашем случае мы бы могли также использовать this.props.children.map. Но чтобы произошло в случае, когда кто-нибудь бы передал функцию как потомка? this.props.children был бы функцией, а не массивом и мы бы словили ошибку.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_WxuWukVXXs5AJ4zfIi4Ltg.png\")
Но а с React.Children.map это не будет вообще проблемой:
<IgnoreFirstChild>\n {() => <h1>First</h1>} // <- Ignored 💪\n</IgnoreFirstChild>Так как this.props.children может быть совершенно любым типом данных, проверка количества потомков у компонента может быть довольно сложным процессом. Наивно написав this.props.children.length вы получите 12, если станете проверять строку \"Hello World!\", хоть там и будет один потомок.
Именно поэтому у нас и есть React.Children.count:
class ChildrenCounter extends React.Component {\n render() {\n return <p>React.Children.count(this.props.children)</p>\n }\n}Так мы получим количество потомков, вне зависимости от их типа данных:
\n\n\n\n// Renders \"1\"\n<ChildrenCounter>\n Second!\n</ChildrenCounter>\n\n// Renders \"2\"\n<ChildrenCounter>\n <p>First</p>\n <ChildComponent />\n</ChildrenCounter>\n\n// Renders \"3\"\n<ChildrenCounter>\n {() => <h1>First!</h1>}\n Second!\n <p>Third!</p>\n</ChildrenCounter>Ну и под конец, если ни один из методов выше вам не подходит, то вы можете конвертировать children в массив при помощи метода React.Children.toArray. Это было бы полезно в случае сортировки, например:
class Sort extends React.Component {\n render() {\n const children = React.Children.toArray(this.props.children)\n return <p>{children.sort().join(' ')}</p>\n }\n}\n<Sort>\n // Тут мы используем контейнеры выражений, чтобы убедиться в том, что наши строки\n // переданы как три отдельных потомка, а не как одна строка\n {'bananas'}{'oranges'}{'apples'}\n</Sort>Пример выше рендерит строки, но уже отсортированные:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_KuWvpsCo-OlyVOt6sMtXyQ.png\")
Обратите внимание, что возвращаемый React.Children.toArray массив не содержит потомков с типом функция, а только React.Element или строки.
Если вы вспомните о предыдущем компоненте <Executioner />, то он работает с одним потомком, который является функцией.
class Executioner extends React.Component {\n render() {\n return this.props.children()\n }\n}Мы можем уточнить это условие с помощью propTypes, что будет выглядеть примерно таким образом:
Executioner.propTypes = {\n children: React.PropTypes.func.isRequired,\n}Тут выйдет сообщение в консоль, которое в принципе будет проигнорировано разработчиком. Вместо этого мы можем использовать React.Children.only внутри рендера.
class Executioner extends React.Component {\n render() {\n return React.Children.only(this.props.children)()\n }\n}В этом случае отрендерится только один единственный потомок в this.props.children. Если их будет больше, чем один, то нам выкинет ошибку, следовательно, работа приложения будет приостановлена — идеально для тех случаев, когда ленивый разработчик пытается разобраться с вашим приложением.
Мы можем рендерить произвольные компоненты как children. Но продолжать контролировать их из родителя, а не из компонента из которого мы их рендерим. Давайте посмотрим на этот момент повнимательнее. Представим, что у нас есть компонент RadioGroup, который может включать в себя несколько компонентов RadioButton. (которые рендерят <input type=\"radio\">)
RadioButton’ы не рендерятся из RadioGroup сами по себе, а используются как Children. Что говорит о том, что где-то в нашем приложении у нас есть такой код:
render() {\n return(\n <RadioGroup>\n <RadioButton value=\"first\">First</RadioButton>\n <RadioButton value=\"second\">Second</RadioButton>\n <RadioButton value=\"third\">Third</RadioButton>\n </RadioGroup>\n )\n}В этом коде есть небольшая проблемка. Инпуты не сгруппированы, что приводит к такому результату:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_c-_IqGC8PTEfLUMg8CXM5Q.png\")
Чтобы их сгруппировать им всем нужно иметь одинаковый атрибут name. Мы бы конечно могли бы сразу назначить name каждому RadioButton:
<RadioGroup>\n <RadioButton name=\"g1\" value=\"first\">First</RadioButton>\n <RadioButton name=\"g1\" value=\"second\">Second</RadioButton>\n <RadioButton name=\"g1\" value=\"third\">Third</RadioButton>\n</RadioGroup>Но это скучно и возможно приведёт к ошибкам. А ведь у нас в руках вся сила JavaScript! Можем ли мы использовать её, чтобы автоматически указать RadioGroup нужное нам name для всех его children?
Итак, в RadioGroup мы добавим новый метод под названием renderChildren, который будет редактировать пропсы у children:
class RadioGroup extends React.Component {\n constructor() {\n super()\n this.renderChildren = this.renderChildren.bind(this)\n }\n\n renderChildren() {\n return this.props.children\n }\n\n render() {\n return (\n <div className=\"group\">\n {this.renderChildren()}\n </div>\n )\n }\n}Давайте пробежимся по всем потомкам, чтобы получить каждого из них по отдельности:
\n\n\n\nrenderChildren() {\n return React.Children.map(this.props.children, child => {\n return child\n })\n}Отлично, но как теперь мы можем редактировать их свойства?
\n\n\n\nИ вот тут в игру вступает последний вспомогательный метод. Как и подразумевается под его названием, React.cloneElement клонирует элемент. Мы передаём ему элемент, который желаем скопировать, как первый аргумент, а затем вторым аргументом передаём объект с пропсами, которые должны быть выставлены уже склонированному элементу:
const cloned = React.cloneElement(element, {\n new: 'yes!'\n})Теперь элемент cloned будет иметь пропс new со значением \"yes!\".
И это именно то, что нам нужно для завершения RadioGroup. Мы клонируем каждого потомка и выставляем ему пропс name со значением this.props.name.
renderChildren() {\n return React.Children.map(this.props.children, child => {\n return React.cloneElement(child, {\n name: this.props.name\n })\n })\n}Последним шагом мы передадим уникальный name к RadioGroup:
<RadioGroup name=\"g1\">\n <RadioButton value=\"first\">First</RadioButton>\n <RadioButton value=\"second\">Second</RadioButton>\n <RadioButton value=\"third\">Third</RadioButton>\n</RadioGroup>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_IvXCEAgQmDEKAMiMk3-qmA.png\")
Работает! Вместо указания вручную атрибутов для каждого RadioButton, мы просто можем указать RadioGroup то, что нам нужно, чтобы было name и дальше он позаботиться об этом.
Children заставляют компоненты в React вести себя как элементы разметки, а не отдельные объекты. Используя силу JavaScript и некоторые вспомогательные функции React, мы можем смело с ними работать для создания декларативных API и вообще для упрощения в целом для упрощения рабочего процесса.
В этой статье мы погрузимся в работу с children на React и узнаем как можно с ними работать на реальных примерах.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/reactchildrenksdjnfk.jpg"},"interesting":[{"title":"JavaScript. Почему 3 + true = 4? И другие хитрые уравнения приведения типов","slug":"javascript-pochemu-3true4-i-drugie-hitrye-uravneniya-privedeniya-tipov","type":"js"},{"title":"15 методов работы с элементами про которые вы возможно не слышали","slug":"15-metodov-raboty-s-elementami-pro-kotorie-vy-ne-slyshaly-vozmozhno","type":"js"},{"title":"13 интересных моментов по стилизации JavaScript кода от Google","slug":"13-interesnih-momentov-po-stilizacii-koda-ot-google","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}