Если вы пропустили первые две статьи, я предлагаю вам вернуться и просмотреть их, прежде чем продолжить. Большинство моих статей накапливаются; просто слишком сложно собрать все в одной статье (или это была бы книга).
К настоящему моменту вы должны быть знакомы с компонентами и на высоком уровне понимать разницу между функциональными и основанными на классах компонентами. В этой статье мы рассмотрим функциональные компоненты более подробно.
Давайте создадим новый функциональный компонент Nissan в каталоге src / components /. Готовьтесь… темой этой серии будут автомобили. Если вы читаете предыдущую статью, в каталоге src / components находился файл Test.js. Он был удален, и единственный файл, который вы должны там увидеть, - это Nissan.js.
Если у вас не запущен сервер разработки, самое время:
C:\your-project-root-dir>npm start
Внутри вашего файла Nissan.js вам нужно будет импортировать React. Поскольку это функциональный компонент, это почти все, что вам нужно импортировать.
import React from 'react'
Затем объявите функцию и назовите ее Nissan. Этот функциональный компонент вернет элемент JSX, который будет тегом ‹div› со строкой 1990 Nissan 240sx внутри него.
Сама по себе функциональная составляющая ничего не делает. Нам нужно будет импортировать его в наш файл App.js. Затем мы визуализируем его внутри функционального компонента App, чтобы его можно было отобразить в браузере. Почему внутри приложения? Потому что Приложение уже отображается на экране. Он импортируется в src / index.js, а затем помещается в ‹div id =” root ”›. Это лишь небольшое резюме для вас. Вы можете импортировать Nissan в index.js и при желании напрямую вставить его в ‹div id =” root ”›. Вы поймете, почему вы не хотите этого делать, через секунду.
Чтобы импортировать функциональный компонент Nissan внутри App.js, нам нужно будет экспортировать компонент Nissan, добавив export по умолчанию Nissan в конец файла Nissan.js.
Затем мы импортируем функциональный компонент Nissan в src / App.js. После импорта компонент Nissan можно визуализировать.
- Приложение также является функциональным компонентом. Поскольку это компонент React, ему необходимо импортировать React в верхней части файла App.js. Мы видим это в строке 1.
- В строке 2 импортируется компонент Nissan.
- Функциональный компонент App объявлен в строке 4.
- App возвращает элемент ‹div› JSX, содержащий тег ‹h1› и обработанный компонент Nissan. Компонент визуализируется путем использования имени компонента и создания самозакрывающегося тега: ‹Nissan /›. Позже мы увидим, когда использовать самозакрывающиеся теги, а когда - стандартный закрывающий тег: ‹Nissan› ‹/Nissan›.
- Компонент App экспортируется внизу страницы, а затем импортируется в src / index.js, где он отображается и помещается в ‹div id. = ”Root” ›, расположенный в public / index.html.
Что, если бы мы хотели показать дополнительный автомобиль? Мы могли бы просто повторить тот же процесс, и мы это сделаем. Перейдите в src / components и создайте файл Toyota.js.
Создайте функциональный компонент с именем Toyota, который возвращает элемент ‹div› JSX, содержащий строку Toyota Supra 1995 года выпуска (это последний раз, когда Toyota создавала Supra, и вы не можете убедить мне иначе). Обязательно экспортируйте компонент Toyota в нижней части файла.
Импортируйте файл в src / App.js и визуализируйте его так же, как вы это делали с компонентом Nissan.
Если вы посмотрите в свой браузер, вы увидите Supra, отображаемую прямо под 240sx.
Вот почему мы включаем компоненты в файл src / App.js вместо прямого перехода к src / index.js: чтобы мы могли визуализировать несколько компонентов. Мы можем вернуть только один элемент JSX. Чтобы вернуть несколько элементов JSX, мы должны заключить их в один. В этом случае наш внешний тег ‹div› содержит тег ‹h1›, тег ‹Nissan /› и тег Тег ‹Toyota /›. При рендеринге мы получаем что-то вроде этого:
Мы также можем вызывать функциональный компонент сколько угодно раз внутри нашего компонента App. Итак, если мы хотим отобразить 240sx 5 раз, мы можем просто отрендерить компонент 5 раз.
Посмотрев в браузер, вы убедитесь, что Nissan отображается 5 раз.
Если бы мы хотели создать другие средства передвижения, мы могли бы создать отдельные компоненты для каждого из них, импортировать их в App.js и отрендерить их. Это непрактично. Было бы намного лучше иметь один компонент с именем Car, которому мы могли бы передавать аргументы. В следующей статье мы рассмотрим, как передавать аргументы функциональным компонентам.
