React createElement - создание элементов в React

React.createElement это метод из React API, который позволяет создавать элементы React. Этот метод принимает три аргумента:

1. Тип элемента

2. Атрибуты (props) элемента

3. Дочерние элементы

Например, создадим элемент кнопки при помощи метода createElement:

js
const buttonElement = React.createElement('button', {'className': 'button'}, 'Click me!');

В данном примере мы создали элемент 'button', дали ему класс 'button' и добавили текст "Click me!" в качестве дочернего элемента.

Теперь, когда мы создали элемент React, мы можем использовать его в нашем компоненте. Для этого нужно передать элемент в метод render нашего компонента:

js
class MyComponent extends React.Component {
  render() {
    const buttonElement = React.createElement('button', {'className': 'button'}, 'Click me!');
    return (
      

        {buttonElement}
      
    );
  }
}

В данном примере мы создали компонент MyComponent и использовали метод createElement для создания кнопки. Затем мы передали эту кнопку в метод render, который возвращает её внутри элемента div.

React.createElement позволяет использовать заранее определенные компоненты React в качестве типов элементов. Таким образом, мы можем создавать сложные деревья компонентов, используя вложенные вызовы React.createElement:

js
const complexElement = React.createElement('div', null,
  React.createElement('h1', null, 'Hello'),
  React.createElement('p', null, 'This is a complex element.'),
  React.createElement('button', {'className': 'button', 'onClick': () => alert('Clicked!')}, 'Click me!')
);

В данном примере мы создали элемент div, который содержит в себе заголовок h1, параграф p и кнопку. Кнопка имеет класс 'button' и обработчик события onClick, который выводит сообщение при клике на кнопку.

Таким образом, React.createElement позволяет нам создавать элементы React в динамическом режиме и добавлять их в компоненты, что позволяет создавать сложные интерфейсы и приложения.