Перейти к основному содержанию

Компоненты

Мы много раз видели, как выглядит код сайтов. И всегда он состоит из разных тегов, раскиданных по иерархии.

Компоненты - это небольшие функции, которые возвращают xml разметку, которая состоит из похожих тегов. Перед тем, как мы начнём их более подробно разбирать, давайте разберёмся с синтаксисом.

Синтаксические особенности​

Значения атрибутов по-умолчанию принимают только строки, поэтому все остальные значения будут писаться внутри фигурных скобок.

Например числа будут записаны так:

<x={10} y={10}>
//или так: библиотека автоматически преобразует строки в числа для позиций и размеров
<x="10" y="10">

Объекты так:

<font={{ size: 30 }}>

Функции так:

<onClick={() => {}}>

В случае, если компоненты ничего не принимают, их можно записать короче:

<Component/>

Применение компонентов​

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

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

Про теги, значения и параметры​

Рассматривая более сложные компоненты, а именно принимающие какие-то данные, мы можем столкнуться с какими-то мистическими полями. Давайте разбираться:

Теги​

Tag - это аргумент с названием нашего тега. Например:

const example = <text name="aboba">Это наш текст!</text>

Где text, это название тега. Оно определяет то, что будет хранить наш компонент или структура, что очень важно и нужно запомнить. Открытые теги всегда должны быть закрыты.

Значения​

Children - это аргумент со значением, которое хранится внутри нашего компонента. Давайте вернёмся к примеру. В нём вы можете заметить предложение Это наш текст!. Оно и является аргументом children.

Параметры​

Properties - это аргумент с объектом с атрибутами наших компонентов, в паре название_атрибута: значение. Например у нас в примере был атрибут name, хранящий значение aboba. Атрибуты определяют стили, позиции и размеры, а так же все остальные параметры, вплоть до событий.

Самовычисляемые атрибуты​

Компоненты умеют брать свои значения и автоматически подставлять их в поля. Таким образом, все текстовые элементы создадут поле text автоматически из нашего значения children, а в остальных элементах значения компонентов станут значением поля bitmap.

Всё это не будет работать, если атрибуты указаны явно и не равны null.

Умные компоненты: запрашиваемые переходы на сайты и автоподгрузка картинок по указанному пути​

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

Загрузка картинок​

Загрузка картинок происходит при помощи атрибутов src и src2, которые позволяют загружать картинки из указанных в атрибутах путей. Например:

const image = <image src="__dir__/assets/ui/aboba.png" src2="__dir__/assets/ui/aboba2.png"/>

В данном примере атрибут src загружает картинку для поля bitmap, src2 для поля bitmap2.

Ссылки​

Ссылки позволяют направлять пользователей на сайты и применимы практически для любых элементов. При этом объявленный функционал событий так же сохраняется.

href - это атрибут, который при клике открывает окошко, предлагающее перейти по указанной ссылке.

hrefLong делает это при удерживании.

const star = <text href="github.com/ArtemKot4/Infinite-Forest">Поставьте звезду, буду благодарен :D</text>

Ссылки автоматически достраиваются, если не хватает протокола https. Таким образом вам необязательно добавлять https://, хотя его добавление и допустимо.

События​

События - это атрибуты, которые принимают внутрь себя функции, которые после исполняются нашими элементами. Поддерживаются события из поля custom для custom компонентов, и события из поля clicker для всех остальных. Рассмотрим пример с событиями клика:

const clickElement = (
    <text onClick={() => alert("click")} onLongClick={
        () => alert("longClick")
    }>пример</text>
)

Пишем собственные компоненты​

Напишем компонент, который будет возвращать объект с картинкой и посмотрим на получившуюся структуру:

const Cat = () => (
    <image name="cat">cat</picture>
);

В итоге мы получим такой объект:

{
    cat: {
        type: "image",
        bitmap: "cat",
        x: 0,
        y: 0
    }
}

Атрибут name​

Атрибут name определяет название нашего ключа. В случае, если он не будет указан, компонент превратится в функцию, которая возвращает объект drawing элемента, если типом является text, frame или custom.

В случае, если атрибут name не указан и он не становится drawing элементом, ему присваивается случайный uuid. Это полезно в случае, если нам неважны названия ключей. Так же такое поведение можно вызвать, передав в атрибут name значения "" или false.

Тег element​

Тег element позволяет нам получить объект с параметрами, опуская ключ. В таком случае тип будет определяться атрибутом type.

Пример:

const Cat = () => (
    <element type="text">Мяу</element>
);

В итоге мы получим такой объект:

{
    type: "text",
    text: "Мяу",
    x: 0,
    y: 0
}

Передача данных в компоненты:​

Компоненты могут не просто строить данные на лету, они умеют делать это из чего угодно. Просто передайте нужные данные в виде атрибутов или значения (child).

Создадим подобный компонент:

const Title = (properties, children) => {
    return <text name={properties.name} font={{ 
        color: 0.375, size: 30 
    }}>{ children }</text>
}

Передадим данные:

const title = Title({
    name: "title"
}, "Привет, компонент!") /*или*/ <Title name="title">Привет, компонент!</Title>

Посмотрим на то, что получилось в итоге:

{
    title: {
        type: "text",
        font: { color: 0.375, size: 30 },
        text: "Привет, компонент!"
    }
}