У React есть дети?
Еще несколько дней назад дочерние компоненты были для меня полной загадкой. Только когда я начал использовать gatsby.js с React, лампочка, наконец, погасла.
Каждый компонент в реакции может иметь либо одного дочернего элемента, либо массив дочерних элементов, либо вообще не иметь дочерних элементов. Скорее всего, вы все это время использовали дочерние компоненты, даже не подозревая об этом. Когда компонент написан так:
Компонент можно давать детям. По сути, это другие элементы, вложенные в первый компонент.
реквизит.дети
Props.children автоматически встраивается в каждый компонент. Самый простой способ, который я смог понять, это то, что он работает как заполнитель для значения, которое позже будет введено как дочерний элемент при использовании компонента. Если это все еще немного сбивает с толку, не волнуйтесь, я прав с вами. Другой способ думать об этом, по сути, похож на обещание, которое вы даете при создании компонента, обещание дать ему какое-то содержание.
Props.children позволяет передавать информацию компоненту без указания типа или имени. Из-за этого он может возвращать undefined, null, логическое значение, число, строку, элемент React или массив любого из этих типов. Это также может быть функция, возвращающая один из этих типов. Возможности довольно безграничны!
Взгляните на приведенный выше пример компетентного макета. . Здесь реквизит деконструируется и теперь может использоваться без префикса «реквизит».
Наши дочерние реквизиты включены в основной раздел после тега h1. Включив этот реквизит, мы можем создать шаблон макета, не зная точно, что мы хотим включить в тело содержимого нашего компонента. Затем, когда мы собираемся использовать наш компонент в нашем проекте, все, что нам нужно сделать, это предоставить ему дочерние элементы (или оставить его пустым и иметь пустой раздел).
Теперь компонент макета имеет четырех дочерних элементов. Два дочерних компонента и два элемента. Эти дочерние элементы выполнят обещание, данное ранее в компоненте Layout.
Почему вы должны заботиться
props.children является мощным и позволяет нам в полной мере использовать повторное использование реакций. Мы можем создавать динамические компоненты, которые можно использовать в любом месте нашего кода, в этом вся суть реакции!
