Nome tag dinamico in jsx e React

Question

Provo a scrivere un componente React. per i tag di intestazione html (h1, h2, h3, ecc.), in cui la priorità di titolo cambia dinamicamente in base alla priorità che abbiamo definito nei puntelli.

Ecco cosa cerco di fare.

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

risultato atteso:

<h1>Hello</h1>

Questo non funziona. C'è qualche metodo possibile per fare questo?

Answer 1

Non c'è modo di farlo sul posto, appena messo in una variabile (con prima lettera maiuscola):

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

<CustomTag>Hello</CustomTag > 

Answer 2

Per completezza, se si desidera utilizzare un nome dinamico, è possibile anche chiamare direttamente React.createElement invece di utilizzare JSX:

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

Ciò evita di dover creare una nuova variabile o componente.

con oggetti di scena:

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

---

Dal docs:

Crea e restituisce un nuovo elemento Reagire del tipo dato. L'argomento type può essere una stringa nome tag (come 'div' o 'span') o un tipo di componente React (una classe o una funzione).

Il codice scritto con JSX verrà convertito per utilizzare React.createElement(). Generalmente non invocherai direttamente React.createElement() se utilizzi JSX. Vedi React Without JSX per saperne di più.