createElement

createElement дозволяє створити React-елемент. Це слугує альтернативою написанню JSX.

const element = createElement(type, props, ...children)

Довідник

`createElement(type, props, ...children)`

Виклик createElement для створення React-елемента із заданими type, props та children.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

Дивіться більше прикладів нижче.

Параметри

type: Аргумент type повинен бути допустимим типом React-компонента. Наприклад, це може бути рядок імені тегу (наприклад, 'div' або 'span') або React-компонент (функція, клас або спеціальний компонент, як Fragment).
props: Аргумент props має бути об'єктом або null. Якщо ви передасте null, він буде оброблений так само, як порожній об'єкт. React створить елемент з пропсами, що відповідають переданому вами props. Зверніть увагу, що ref і key з вашого об'єкта props є спеціальними і не будуть доступні як element.props.ref та element.props.key у повернутому елементі. Вони будуть доступні як element.ref та element.key.
за бажанням ...children: Нуль або більше дочірніх вузлів. Це можуть бути будь-які вузли React, включаючи React-елементи, рядки, числа, портали, порожні вузли (null), undefined, true та false) та масиви React-вузлів.

Повернення

createElement повертає об'єкт React-елемента з декількома властивостями:

тип: тип ви пройшли.
props: Ви передали props, крім ref та key. Якщо type є компонентом із застарілим type.defaultProps, то будь-які відсутні або невизначені props отримають значення з type.defaultProps.
ref: Переданий вами ref. Якщо відсутній, null.
ключ: Переданий вами ключ примусово перетворюється на рядок. Якщо відсутній, тоді null.

Зазвичай, ви повертаєте елемент зі свого компонента або робите його дочірнім елементом іншого елемента. Хоча ви можете прочитати властивості елемента, найкраще вважати кожен елемент непрозорим після його створення і лише відрендерити його.

Застереження

Ви повинні розглядати React-елементи та їх пропси як незмінні і ніколи не змінювати їх вміст після створення. Під час розробки React буде заморожувати повернутий елемент та його властивість props, щоб забезпечити це.
Коли ви використовуєте JSX, ви повинні починати тег з великої літери, щоб рендерити власний кастомний компонент. Іншими словами, <Something /> еквівалентно createElement(Something), а <something /> (мала літера) еквівалентно createElement('something') (зауважте, що це рядок, тому його буде розглянуто як вбудований тег HTML).
Вам слід передавати дочірні елементи як декілька аргументів до createElement, якщо всі вони є статично відомими, наприклад createElement('h1', {}, child1, child2, child3). Якщо ваші дочірні елементи динамічні, передайте весь масив як третій аргумент: createElement('ul', {}, listItems). Це гарантує, що React попередить вас про відсутність keys для будь-яких динамічних списків. Для статичних списків це не потрібно, оскільки вони ніколи не змінюють порядок.

Використання

Створення елемента без JSX

Якщо вам не подобається JSX або ви не можете використовувати його у вашому проекті, ви можете використовувати createElement як альтернативу.

Щоб створити елемент без JSX, викличте createElement з деяким типом </CodeStep> , <CodeStep data-step="2">props</CodeStep> , і <CodeStep data-step="3">children</CodeStep> :</p> <pre><code data-meta="[[1, 5, "'h1'"], [2, 6, "{ className: 'привітання' }"], [3, 7, "'Привіт',"], [3, 8, "createElement('i', null, name),"], [3, 9, "'. Ласкаво просимо!'"]]" class="language-js">import { createElement } from 'react'; function Greeting({ name }) { повернути createElement() 'h1', { className: 'привітання' }, 'Привіт ', createElement('i', null, name), '. Ласкаво просимо! ); }

діти</CodeStep> є необов'язковими, і ви можете передати стільки, скільки вам потрібно (у прикладі вище є три дочірні елементи). Цей код виведе заголовок <code><h1> з привітанням. Для порівняння, ось той самий приклад, переписаний за допомогою JSX:

{name}</i>. Welcome!"], [1, 5, "h1"]]" class="language-js">function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

Щоб відрендерити власний React-компонент, передайте функцію на кшталт Greeting як тип</CodeStep> замість рядка на кшталт <code>'h1':

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

У JSX це виглядало б так:

export default function App() {
  return <Greeting name="Taylor" />;
}

Ось повний приклад, написаний за допомогою createElement:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

export default function App() {
  return createElement(
    Greeting,
    { name: 'Taylor' }
  );
}

.greeting {
  color: darkgreen;
  font-family: Georgia;
}

А ось той самий приклад, написаний з використанням JSX:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

export default function App() {
  return <Greeting name="Taylor" />;
}

.greeting {
  color: darkgreen;
  font-family: Georgia;
}

Обидва стилі кодування є прийнятними, тому ви можете використовувати будь-який з них для вашого проекту. Основною перевагою використання JSX порівняно з createElement є те, що легко побачити, який закриваючий тег відповідає відкриваючому тегу.

Що таке React-елемент?

Елемент - це полегшений опис частини інтерфейсу користувача. Наприклад, і <Greeting name="Taylor" />, і createElement(Greeting, { name: 'Taylor' }) створюють об'єкт, подібний до цього:

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}

Зауважте, що створення цього об'єкта не призводить до рендерингу компонента Greeting або створення будь-яких елементів DOM.

Елемент React більше схожий на опис - інструкцію для React, щоб пізніше відрендерити компонент Greeting. Повертаючи цей об'єкт з вашого компонента App, ви вказуєте React, що робити далі.

Створення елементів є надзвичайно простим, тому вам не потрібно намагатися його оптимізувати або уникати.

[email protected]