React Компоненты
Компоненты подобны функциям, которые возвращают элементы HTML.
Реагирующие компоненты
Компоненты - это независимые и многократно используемые биты кода.
Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render
.
Компоненты бывают двух типов: компоненты класса и компоненты функции, в этом уроке мы сосредоточимся на компонентах класса.
Создание компонента класса
При создании компонента 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>;
}
}
Теперь в вашем приложении React есть компонент Car
, который возвращает элемент <h2>
.
Чтобы использовать этот компонент в своем приложении, используйте тот же синтаксис, что и обычный HTML:
<Car />
Пример
Отображение компонента Car
в элементе "root":
ReactDOM.render(<Car />, document.getElementById('root'));
Создание компонента функции
Вот тот же пример, что и выше, но созданный с использованием функционального компонента вместо этого.
Компонент функции также возвращает HTML и ведет себя примерно так же, как компонент класса, но компоненты класса имеют некоторые дополнения и будут предпочтительны в этом учебнике.
Пример
Создайте функциональный компонент с именем Car
function Car() {
return <h2>Hi, I am also a Car!</h2>;
}
В очередной раз ваше React приложение имеет авто компонент.
Обратитесь к компоненту Car
как обычный HTML (за исключением React, компоненты must начинаться с заглавной буквы):
Пример
Отображение компонента Car
в элементе "root":
ReactDOM.render(<Car />, document.getElementById('root'));
Конструктор компонентов
Если есть функция constructor()
в вашем компоненте,
эта функция будет вызвана при инициализации компонента.
Функция конструктора - это место, где вы инициируете свойства компонента.
В React свойства компонентов должны храниться в объекте с именем state
.
Вы узнаете больше о state
позже в этом уроке.
Функция конструктора также является местом, где вы соблюдаете наследование родительского компонента,
включая оператор super()
,
который выполняет функцию конструктора родительского компонента,
и ваш компонент имеет доступ ко всем функциям родительского компонента (React.Component
).
Пример
Создать функцию конструктор компонента Car
, и добавить свойство "color":
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a Car!</h2>;
}
}
Используйте свойство "color" в функции render()
:
Пример
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
Реквизит
Еще один способ обработки свойств компонентов - это использование props
.
Реквизиты подобны аргументам функции, и вы отправляете их в компонент в качестве атрибутов.
Вы узнаете больше о props
в следующей главе.
Пример
Используйте атрибут для передачи цвета компоненту Car
и используйте его в функции render()
:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Компоненты в компонентах
Мы можем ссылаться на компоненты внутри других компонентов:
Пример
Используйте компонент автомобиля внутри компонента гаража:
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Компоненты в файлах
React - это все о повторном использовании кода, и это может быть разумно, чтобы вставить некоторые из ваших компонентов в отдельные файлы.
Для этого создайте новый файл с расширение файла .js
и поместите в него код:
Обратите внимание, что файл должен начинаться с импорта React (как и раньше), а заканчиваться он должен инструкцией
export default Car;
.
Пример
Это новый файл, мы его назвали "App.js":
import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>;
}}
export default Car;
Чтобы иметь возможность использовать компонент Car
,
вы должны импортировать файл в свое приложение.
Пример
Теперь мы импортируем файл "App.js" в приложении, и мы можем использовать компонент автомобиля, как если бы он был создан здесь.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';
ReactDOM.render(<Car />, document.getElementById('root'));