Главная » React & Redux » Элементы и компоненты

Элементы и компоненты


15.10.2021, 00:00

Элементы - это структурные частицы компонентов, они не изменяемы напрямую, а только пересозданы и заново помещены на страницу через VirtualDOM.

Компоненты - это самостоятельные единицы, структурные блоки нашего приложения, они могут быть переиспользованы.

React-компоненты всегда должны быть записаны с заглавной буквы, это функции, которые могут возвращать JSX-элементы и могут содержать внутри себя какую-то структуру и логику.

Пример компонента - функция App(), находящаяся в файле App.js нашего базового приложения, которое мы создавали здесь.

Код

function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>

       </header>
     </div>
   );
}

Создадим в файле App.js свой простейший компонент, для этого создаём переменную Header и в неё помещаем стрелочную функцию, которая вернёт нам заголовок с текстом :

Код

const Header = () => {
   return <h2>Hello World</h2>
}

Теперь можно поместить наш компонент в компонент App:

Код

const Header = () => {
   return <h2>Hello World</h2>
}

function App() {
   return (
     <div className="App">
         <Header/>
     </div>
   );
}

И на странице сайта появится наш заголовок с текстом.

Создадим ещё один компонент по аналогии с первым:

Код

const Field = () => {
   return <input placeholder="Type here..." type="text" />
}

И ещё один как функцию:

Код

function Btn() {
   return <button />
}

Мы их также можем использовать внутри компонента App():

Код

function App() {
   return (
     <div className="App">
         <Header/>
         <Field />
         <Btn />
     </div>
   );
}

И они все также появятся на странице сайта.

Мы можем немного доработать компонент Btn():

Код

function Btn() {
   const text = 'Log In';
   return <button>{text}</button>
}

И вот что у нас получилось:



Внутри компонентов также можно использовать функции, например, вызывая их внутри фигурных скобок:

Код

function Btn() {
   const res = () => {
     return 'Log In';
   }
   return <button>{res()}</button>
}

Также внутри компонентов мы можем реализовать какую-то логику, например, проверку условия.

В примере ниже с помощью тернарного оператора проверяется условие, залогинен пользователь на сайте или нет (используем переменную logged, содержащую булево значение):

Код

function Btn() {
       const text = 'Log In';
       const logged = true;
   return <button>{logged ? 'Enter' : text}</button>
}

Получаем: если значением переменной logged будет true, то текст кнопки будет "Enter", а если false, то "Log In"

Внутри фигурных скобок не используются конструкции if/else, а только тернарный оператор.

С помощью фигурных скобок можно манипулировать внутренним содержимым атрибутов:

Код

const Field = () => {
     const holder = 'Enter here';
     return <input placeholder={holder} type="text" />
}

А так можно назначить какие-нибудь инлайн-стили (для стилей используем объект):

Код

const Field = () => {
      const holder = 'Enter here';
      const styleField = {
          width: '300px'
   };
   return <input placeholder={holder} type="text" style={styleField}/>
}

для удобства чтения допустима также такая запись атрибутов:

Код

const Field = () => {
      const holder = 'Enter here';
      const styleField = {
          width: '300px'
   };
   return <input  
           placeholder={holder}  
           type="text"  
           style={styleField}/>
}

Одно из правил использования компонентов: их можно и нужно размещать в разных файлах, а также экспортировать и импортировать в другие файлы для удобства

Например, экспортируем компонент Header, для этого в самом низу файла App.js перед строкой экспорта по умолчанию добавим строку:

Код
export {Header}; /* Экспортируем компонент Header */
export default App;

К примеру, нам нужно использовать этот компонент в файле index.js, для этого нам нужно его импортировать в этом файле:

Код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Header} from './App'; /* Импортируем компонент Header для использования в файле App.js */

Компоненты React могут быть классами (классы - это теже функции, но в более красивой обёртке)

Чтобы создавать собственные компоненты через классы, для них нужно задать наследование от базового компонента React (с помощью ключевого слова extends), чтобы создаваемый компонент мог унаследовать всё то, что умеет базовый.

в файле должен быть импортирован React

Код

import React from 'react';

Как пример, создаём класс Field:

Код

class Field extends React.Component {
      
}

или же, в файле импортируются только компоненты React, а не вся библиотека:

Код

import {Component} from 'react';

И тогда запись можно делать так:

Код

class Field extends Component {
      
}

в создаваемом классе должен быть главный метод, который называется render(), внутри которого мы уже помещаем какие-то действия

Код

class Field extends Component {
     render() {
         const holder = 'Enter here';
         const styleField = {
             width: '300px'
         };

         return <input  
                 placeholder={holder}  
                 type="text"  
                 style={styleField}/>
     }
}

Результат на странице будет тот же, что и при создании компонента без использования класса, отличие в данном случае лишь в использовании метода render() внутри компонента, создаваемого через класс.

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
React-компоненты
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)