React-компоненты
Компоненты — это независимые и многократно используемые биты кода.
Они служат той же цели, что и функции JavaScript, но работают
изолированно и возвращают HTML через функцию render.
Компоненты бывают двух типов: компоненты класса и компоненты
функции.
Создание компонента класса
При создании компонента React, его имя должно начинаться с заглавной
буквы.
Компонент должен включать в себя оператор extends [Link]. Этот
оператор создаёт наследование для [Link]. и даёт доступ к
функциям [Link].
Компонент также требует наличия метода render(). Метод возвращает
HTML-код.
Пример
class Car extends [Link] {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Конструктор
Если в вашем компоненте есть функция constructor(), то функция будет
вызвана при инициализации компонента.
Функция конструктора — это место, где вы инициируете свойства
компонента.
В React свойства компонентов должны храниться в объекте с
именем state.
Вы узнаете больше о state позже.
Функция конструктора также является местом, где вы соблюдаете
наследование родительского компонента, включая оператор super(),
который выполняет функцию конструктора родительского компонента, и
ваш компонент имеет доступ ко всем функциям родительского
компонента ([Link]).
Пример
Создать функцию-конструктор компонента Car и добавить свойство color:
class Car extends [Link] {
constructor() {
super();
[Link] = {color: "red"};
}
render() {
return <h2>I am a {[Link]} Car!</h2>;
}
}
Создание компонента функции
Вот тот же пример, что и выше, но созданный с использованием
функционального компонента.
Компонент функции также возвращает HTML и ведёт себя примерно так
же, как компонент класса.
Пример
function Car() {
return <h2>Hi, I am also a Car!</h2>;
}
Теперь в вашем приложении React есть компонент Car, который
возвращает элемент <h2>.
Чтобы использовать этот компонент в своём приложении, используйте тот
же синтаксис, что и в обычном HTML — <Car />.
Пример
Отображение компонента Car в элементе root:
[Link](<Car />, [Link]('root'));
React Props
Props — это аргументы, передаваемые в компоненты React.
Для отправки props в компонент используйте тот же синтаксис, что и в
атрибутах HTML.
Пример
Добавьте атрибут brand к элементу Car:
const myelement = <Car brand="Ford" />;
Компонент получает аргумент в виде объекта props.
Пример
Используйте атрибут brand в компоненте:
class Car extends [Link] {
render() {
return <h2>I am a {[Link]}!</h1>;
}
}
Props в конструкторе
Если ваш компонент имеет функцию конструктора, то реквизиты всегда
должны передаваться конструктору, а [Link] должен
передаваться через метод super().
Пример
class Car extends [Link] {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {[Link]}!</h2>;
}
}
[Link](<Car model="Mustang"/>,
[Link]('root'));
Props в компоненте функции
function Car (props) {
const showMessage = () => {
alert(' I am a ' + [Link]);
};
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<button onClick={handleClick}>Follow</button>
);
}
[Link](<Car model="Mustang"/>,
[Link]('root'));