जेएसएक्स में डायनामिक टैग नाम और प्रतिक्रिया

Question

मैं एक प्रतिक्रिया घटक लिखने का प्रयास करता हूं। एचटीएमएल शीर्षक टैग (एच 1, एच 2, एच 3, आदि ...) के लिए, जहां प्राथमिकता के आधार पर शीर्षक प्राथमिकता गतिशील रूप से बदलती है जिसे हमने प्रोप में परिभाषित किया है।

यहां मैं क्या करने का प्रयास करता हूं।

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

उम्मीद उत्पादन:

<h1>Hello</h1>

यह काम नहीं कर रहा। क्या ऐसा करने के लिए कोई संभावित तरीका है?

Answer 1

कोई रास्ता नहीं है कि यथा-स्थान, बस इसे एक चर में डाल (पहले अक्षर के साथ बड़े अक्षरों में) करने के लिए:

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

<CustomTag>Hello</CustomTag > 

Answer 2

पूर्णता के लिए, आप एक गतिशील नाम उपयोग करना चाहते हैं, तो आप भी सीधे कॉल कर सकते हैं React.createElement JSX उपयोग करने के बजाय:

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

यह एक नया चर या घटक बनाने के लिए होने टाल।

रंगमंच की सामग्री के साथ

:

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

---

docs से:

बनाएँ और दिए गए प्रकार का एक नए तत्व प्रतिक्रिया लौटने। प्रकार तर्क या तो टैग नाम स्ट्रिंग (जैसे 'div' या 'span'), या एक प्रतिक्रिया घटक प्रकार (एक वर्ग या फ़ंक्शन) हो सकता है।

जेएसएक्स के साथ लिखे गए कोड को React.createElement() उपयोग में परिवर्तित कर दिया जाएगा। यदि आप जेएसएक्स का उपयोग कर रहे हैं तो आप आम तौर पर React.createElement() का आह्वान नहीं करेंगे। अधिक जानने के लिए React Without JSX देखें।