Использовать React для вставки вложенных компонентов
Прошлая задача показала простой способ составления двух компонентов, но есть много разных способов компоновки компонентов с помощью React. Компонентный состав является одной из мощных возможностей React. Когда вы работаете с React, важно начать думать о своем пользовательском интерфейсе с точки зрения таких компонентов, как пример приложения в последнем вызове. Вы разбиваете свой пользовательский интерфейс на свои основные строительные блоки, и эти части становятся компонентами. Это помогает отделить код, отвечающий за пользовательский интерфейс, от кода, ответственного за обработку вашей логики приложения. Это может значительно упростить разработку и сопровождение сложных проектов.
В редакторе кода есть два функциональных компонента, называемых TypesOfFruit
и Fruits
. Возьмите TypesOfFruit
компонент и скомпонуйте его, или вложите его, в пределах компонента Fruits
. Затем возьмите компонент Fruits
и выведите его в компоненте TypesOfFood
. Результатом должен быть дочерний компонент, вложенный в родительский компонент, который вложен в собственный родительский компонент.