createElement

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

• Справочник
  • createElement(type, props, ...children)
• Использование
  • Создание элемента без JSX

Справочник

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. Они будут доступны как element.ref и element.key.

• необязательно ...children: Ноль или более дочерних узлов. Они могут быть любыми React-узлами, включая React-элементы, строки, числа, порталы, пустые узлы (null, undefined, true, и false), и массивы React-узлов.

Возвращаемое значение

createElement возвращает объект React-элемента с несколькими свойствами:

• type: Переданный вами type.
• props: Переданные вами props, за исключением ref и key. Если type является компонентом с устаревшей поддержкой type.defaultProps, любые отсутствующие или неопределенные props получат значения из type.defaultProps.
• ref: Переданные вами ref. Если отсутствуют, null.
• key: Переданные вами key, преобразованные в строку. Если отсутствуют, null.

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

Ограничения

• Вы должны рассматривать React-элементы и их атрибуты как неизменяемые и никогда не изменять их содержимое после создания. В режиме разработки React будет замораживать возвращенный элемент и его свойство props поверхностно для обеспечения этого.

• При использовании JSX, вы должны начинать тег с большой буквы, чтобы отобразить свой собственный пользовательский компонент. Другими словами, <Something /> эквивалентно createElement(Something), но <something /> (в нижнем регистре) эквивалентно createElement('something') (обратите внимание, что это строка, поэтому она будет обработана как встроенный HTML-тег).

• Вы должны передавать дочерние элементы как несколько аргументов функции createElement только если они все статически известны, например, createElement('h1', {}, child1, child2, child3). Если ваши дочерние элементы динамические, передайте весь массив в качестве третьего аргумента: createElement('ul', {}, listItems). Это гарантирует, что React будет предупреждать вас об отсутствующих key для любых динамических списков. Для статических списков это не нужно, потому что они никогда не меняют порядок.

Использование

Создание элемента без JSX

Если вам не нравится JSX или вы не можете использовать его в своем проекте, вы можете использовать createElement в качестве альтернативы.

Чтобы создать элемент без JSX, вызовите createElement с некоторыми типом, атрибутами и детьми:

import { createElement } from 'react';

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

Дети являются необязательными, и вы можете передать столько, сколько вам нужно (в примере выше три ребенка). Этот код отобразит заголовок <h1> с приветствием. Для сравнения, вот тот же пример, переписанный с помощью JSX:

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

Чтобы отобразить свой собственный React-компонент, передайте функцию, такую как Greeting в качестве типа вместо строки, такой как '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' }
  );
}

И вот тот же пример, написанный с использованием JSX:

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

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

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

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