React Components

Компонентите са като функции, които връщат HTML елементи.


React Components

Компонентите са независими и многократно използвани битове код. Те служат на същата цел като JavaScript функциите, но работят изолирано и връщат HTML чрез функция за рендиране.

Компонентите се предлагат в два типа, клас компоненти и функции компоненти, в този урок ще се концентрираме върху компоненти клас.


Създайте компонент на клас

Когато създавате компонент на React, името на компонента трябва да започва с главна буква.

Компонентът трябва да включва extends React.Component израза, този израз създава наследство към React.Component и дава на вашия компонент достъп до функциите на React.Component.

Компонентът също изисква render() метод, този метод връща HTML.

Пример

Създайте компонент клас, наречен Car

Сега вашето приложение React има компонент, наречен Car, който връща <h2> елемент.

За да използвате този компонент във вашето приложение, използвайте подобен синтаксис като нормалния HTML:  <Car />

Пример

Показване на Car компонента в елемента „root“:

Пример за изпълнение »


Създайте компонент на функция

Ето същия пример като по-горе, но създаден с помощта на компонент Function вместо това.

Компонентът Function също връща HTML и се държи почти по същия начин като компонент Class, но компонентите на Class имат някои допълнения и ще бъдат предпочитани в този урок.

Пример

Създайте функционален компонент, наречен Car

За пореден път вашето приложение React има компонент Car.

Обърнете се към компонента Car като нормален HTML (с изключение на React, компонентите трябва да започват с главна буква):

Пример

Показване на Car компонента в елемента „root“:

Пример за изпълнение »


Конструктор на компоненти

Ако constructor() във вашия компонент има функция, тази функция ще бъде извикана, когато компонентът бъде иницииран.

Функцията конструктор е мястото, където инициирате свойствата на компонента.

В React свойствата на компонентите трябва да се съхраняват в обект, наречен state.

Ще научите повече за това state по-късно в този урок.

Функцията конструктор също е мястото, където почитате наследяването на родителския компонент, като включите super() израза, който изпълнява конструкторската функция на родителския компонент, а вашият компонент има достъп до всички функции на родителския компонент ( React.Component).

Пример

Създайте функция конструктор в компонента Car и добавете свойство цвят:

Използвайте свойството color във функцията render ():

Пример

Пример за изпълнение »


Свойства

Друг начин за обработка на свойствата на компонентите е чрез използване props.

Реквизитът е като аргументи на функцията и ги изпращате в компонента като атрибути.

Ще научите повече за това propsв следващата глава.

Пример

Използвайте атрибут, за да предадете цвят на компонента Car и го използвайте във функцията render():

Пример за изпълнение »


Компоненти в Компоненти

Можем да се позовем на компоненти вътре в други компоненти:

Пример

Използвайте компонента Car вътре в компонента Garage:

Пример за изпълнение »


Компоненти във файлове

React е свързан с повторно използване на код и може да е умно да вмъкнете някои от компонентите си в отделни файлове.

За да направите това, създайте нов файл с .js разширение на файла и поставете кода вътре в него:

Имайте предвид, че файлът трябва да започне с импортиране на React (както преди) и трябва да завършва с изявлението export default Car;.

Пример

Това е новият файл, ние го нарекохме „App.js“:

За да можете да използвате компонента Car, трябва да импортирате файла във вашето приложение.

Пример

Сега импортираме файла „App.js“ в приложението и можем да използваме компонента Car, сякаш е създаден тук.

Пример за изпълнение »