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

Question

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

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

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

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

ожидаемый результат:

<h1>Hello</h1>

это не работает. Есть ли способ сделать это?

791 4

node.js react-jsx

4 ответов:

Comments

Ничего не найдено.

zerkms · Accepted Answer · 2015-11-02 08:31:11

нет способа сделать это на месте, просто поместите его в переменную (с первой буквой заглавной):
const CustomTag = `h${this.props.priority}`;

<CustomTag>Hello</CustomTag >

Felix Kling · Accepted Answer · 2017-10-04 11:10:55

для полноты, если вы хотите использовать динамическое имя, вы также можете напрямую позвонить React.createElement вместо использования JSX:
React.createElement(`h${this.props.priority}`, null, 'Hello')
это избавляет от необходимости создавать новую переменную или компонент.

С реквизитом:
React.createElement(
  `h${this.props.priority}`,
  {
    foo: 'bar',
  },
  'Hello'
)
С docs:

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

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

robstarbuck · Accepted Answer · 2018-06-15 00:51:17

в случае динамических заголовков (h1, h2...) компонент может вернуться React.createElement (указанный выше Феликс) вот так.
const Heading = ({level, children, ...props}) => {
    return React.createElement(`h${level}`, props , children)
}
для композиционности передаются как реквизит, так и дети.

Пример

Lucas Milotich · Accepted Answer · 2018-06-15 03:39:27

вы можете добавить что-то вроде этого:
render(){
  let yourDynamicTag = $yourTag
  return (
   <div>
   {yourDynamicTag}
  </div>
  )
}