Имя динамического тега в jsx и React

Я пытаюсь написать компонент React. для html заголовков (h1, h2, h3 и т.д.), где приоритет заголовка динамически изменяется в зависимости от приоритета, который мы определили в реквизитах.

Вот что я пытаюсь сделать.

<h{this.props.priority}>Hello</h{this.props.priority}>

ожидаемый вывод:

<h1>Hello</h1>

Это не работает. Есть ли какой-нибудь возможный способ сделать это?

Ответы

Ответ 1

Нет способа сделать это на месте, просто поместите его в переменную (с заглавной первой буквой):

const CustomTag = 'h${this.props.priority}';

<CustomTag>Hello</CustomTag>

Ответ 2

Для полноты, если вы хотите использовать динамическое имя, вы также можете напрямую вызвать React.createElement вместо использования JSX:

React.createElement('h${this.props.priority}', null, 'Hello')

Это избавляет от необходимости создавать новую переменную или компонент.

С реквизитом:

React.createElement(
  'h${this.props.priority}',
  {
    foo: 'bar',
  },
  'Hello'
)

Из документов:

Создайте и верните новый элемент React данного типа. Аргументом типа может быть либо строка имени тега (например, 'div' или 'span'), либо тип компонента React (класс или функция).

Код, написанный с использованием JSX, будет преобразован для использования React.createElement(). Обычно вы не будете вызывать React.createElement() напрямую, если вы используете JSX. Смотрите React Without JSX, чтобы узнать больше.

Ответ 3

В случае динамических заголовков (h1, h2...) компонент может вернуть React.createElement (упомянутый выше Феликсом), как это происходит.

const Heading = ({level, children, ...props}) => {
    return React.createElement('h${level}', props , children)
}

Для компоновки пропускаются как реквизиты, так и дети.

См пример