Nome del tag dinamico in jsx e React

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

Ecco cosa cerco di fare.

Hello

uscita prevista:

Hello

Questo non funziona. C’è qualche metodo ansible per fare questo?

Non c’è modo di farlo sul posto, basta inserirlo in una variabile (con la prima lettera maiuscola):

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

Per completezza, se si desidera utilizzare un nome dinamico, è anche ansible chiamare direttamente React.createElement anziché utilizzare JSX:

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

Questo evita di dover creare una nuova variabile o componente.

Con oggetti di scena:

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

Dai documenti :

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

Il codice scritto con JSX verrà convertito per utilizzare React.createElement() . React.createElement() non invocherai direttamente React.createElement() se stai usando JSX. Vedi Reagire senza JSX per saperne di più.

React.createElement delle intestazioni dinamiche (h1, h2 …) , un componente potrebbe restituire React.createElement (menzionato sopra da Felix ) in questo modo.

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

Per la componibilità, sia gli oggetti di scena che i bambini sono passati.

Vedi esempio

Puoi aggiungere qualcosa come questo:

 render(){ let yourDynamicTag = $yourTag return ( 
{yourDynamicTag}
) }