Как работают динамические теги JSX?

Question

Искал, как сделать заголовки компонента зависимыми от props и наткнулся на такой пример:

const Title = ({priority})=> {
   const CustomTag = `h${priority}`;

   return (<CustomTag>Hello</CustomTag>)
}

Я так понял, что там создаётся как бы компонента CustomTag но в неё записывается строка, хотя в React как я понимаю компонент должен быть классом или функцией, но почему тогда это работает?

Подскажите пожалуйста, как это работает?

Answer 1

Babel не проверяет, что такое CustomTag. Ему важно только с большой или маленькой буквы начинается имя. JSX это просто синтаксический сахар и в конечном итоге он превращается в React.createElement. Вся разница только в том, что если переменная начинается с большой буквы, то она не будет взята в кавычки.

Например <span>test</span> превратится в React.createElement('span', …), а <Span>test</Span> в React.createElement(Span, …).

При этом React.createElement сам проверяет тип первого аргумента и если это строка, то он создаёт обычный DOM-элемент, а если функция/класс, то пользовательский компонент.

В вашем примере будет вызван примерно такой код:

React.createElement(
    `h${priority}`,
    null,
    'Hello'
);

А дальше React.createElement разберётся что ему передали строку и создаст соответствующий элемент.

БЛОГ НА HUSL

Как работают динамические теги JSX?

Ответы (1 шт):