Dinamik etiket adı jsx ve React

Question

Bir React bileşeni yazmaya çalışıyorum. html başlık etiketleri (h1, h2, h3, vb ...) için, önceliği, sahne içinde tanımladığımız önceliğe göre dinamik olarak değişiyor.

Burada yapmaya çalışıyorum.

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

beklenen çıkışı:

<h1>Hello</h1>

Bu çalışmıyor. Bunu yapmak için herhangi bir yöntem var mı?

Answer 1

(ilk harfi büyük olan) yerinde, sadece bir değişkene koymak bunu Hiçbir şekilde: Dinamik bir isim kullanmak isterseniz

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

<CustomTag>Hello</CustomTag > 

Answer 2

Tamamlayıcı olmak üzere, aynı zamanda doğrudan arayabilir kullanmak yerine JSX ait React.createElement:

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

Bu yeni bir değişken veya bileşeni oluşturmak zorunda kaçınır. docs itibaren

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

---

: sahne ile

oluşturun ve verilen türde yeni Tepki elemanı döndürür. Type argümanı, bir etiket adı dizgisi (örneğin, 'div' veya 'span') veya bir React bileşen türü (bir sınıf veya işlev) olabilir.

JSX ile yazılmış kod, React.createElement() kullanacak şekilde dönüştürülecektir. JSX kullanıyorsanız, doğrudan React.createElement()'u doğrudan kullanmayacaksınız. Daha fazla bilgi için bkz. React Without JSX. arasında