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

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

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

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

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

<h1>Hello</h1>

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

90
node.js react-jsx

4 ответов

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

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

<CustomTag>Hello</CustomTag >
187

для полноты, если вы хотите использовать динамическое имя, вы также можете напрямую позвонить 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 чтобы узнать больше.

13

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

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

для composability, и упорки и дети переданы.

Пример

0

вы можете добавить что-то вроде этого:

render(){
  let yourDynamicTag = $yourTag
  return (
   <div>
   {yourDynamicTag}
  </div>
  )
}
-5