Создание компонента с композицией
Теперь мы рассмотрим, как мы можем собрать несколько компонентов React вместе. Представьте, что вы создаете
приложение и создали три компонента: Navbar , Dashboard и Footer . Чтобы
собрать эти компоненты вместе, вы можете создать родительский компонент App который отображает
каждый из этих трех компонентов в качестве дочерних . Чтобы отобразить компонент как дочерний элемент в
компоненте React, вы включаете имя компонента, написанное как пользовательский тег HTML в JSX. Например, в методе
render вы можете написать:
return (
<App>
<Navbar />
<Dashboard />
<Footer />
</App>
) < /> как в этом примере), он отображает разметку для этого компонента в местоположении тега. Это
должно иллюстрировать отношения между родителями и дочерними элементами между компонентом App и
Navbar , Dashboard и Footer .
В редакторе кода есть простой функциональный компонент ChildComponent и React-компонент, называемый ParentComponent . Добавьте вывод ChildComponent в ParentComponent . Убедитесь, что тег ChildComponent закрывается косой чертой. Примечание. ChildComponent определяется с помощью стрелочной функции ES6, потому что это очень распространенная практика при использовании React. Однако, знайте, что это всего лишь функция. Подробнее ознакомиться с ними можно здесь и здесь.