Реагировать Компоненты
Компоненты похожи на функции, которые возвращают элементы HTML.
Реагировать Компоненты
Компоненты — это независимые и многократно используемые фрагменты кода. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML.
Компоненты бывают двух типов: компоненты класса и компоненты функций. В этом руководстве мы сосредоточимся на компонентах функций.
В более старых базах кода React вы можете найти в основном используемые компоненты класса. Теперь предлагается использовать функциональные компоненты вместе с хуками, которые были добавлены в React 16.8. Для справки есть необязательный раздел о компонентах класса.
Создайте свой первый компонент
При создании компонента React имя компонента ДОЛЖНО начинаться с заглавной буквы.
Компонент класса
Компонент класса должен включать extends React.Componentоператор. Этот оператор создает наследование для React.Component и предоставляет вашему компоненту доступ к функциям React.Component.
Для компонента также требуется render()метод, этот метод возвращает HTML.
Пример
Создайте компонент класса с именемCar
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Функциональный компонент
Вот тот же пример, что и выше, но созданный с использованием функционального компонента.
Компонент «Функция» также возвращает HTML и ведет себя почти так же, как компонент класса, но компоненты «Функция» могут быть написаны с использованием гораздо меньшего количества кода, их легче понять, и в этом руководстве они будут предпочтительными.
Пример
Создайте функциональный компонент с именемCar
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Визуализация компонента
Теперь в вашем приложении React есть компонент Car, который возвращает
<h2>элемент.
Чтобы использовать этот компонент в своем приложении, используйте синтаксис, аналогичный обычному HTML:
<Car />
Пример
Отобразите Carкомпонент в «корневом» элементе:
ReactDOM.render(<Car />, document.getElementById('root'));
Реквизит
Компоненты могут быть переданы как props, что означает свойства.
Реквизиты похожи на аргументы функций, и вы отправляете их в компонент как атрибуты.
Вы узнаете больше об propsэтом в следующей главе.
Пример
Используйте атрибут для передачи цвета компоненту Car и используйте его в функции render():
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Компоненты в компонентах
Мы можем ссылаться на компоненты внутри других компонентов:
Пример
Используйте компонент Car внутри компонента Garage:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Компоненты в файлах
React — это повторное использование кода, и рекомендуется разделить ваши компоненты на отдельные файлы.
Для этого создайте новый файл с .js
расширением файла и поместите в него код:
Обратите внимание, что имя файла должно начинаться с заглавной буквы.
Пример
Это новый файл, мы назвали его «Car.js»:
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Чтобы иметь возможность использовать компонент Car, вы должны импортировать файл в свое приложение.
Пример
Теперь мы импортируем файл «Car.js» в приложение, и мы можем использовать
Car
компонент, как если бы он был создан здесь.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));