Jsx और React में डायनामिक टैग नाम

Question

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

यहाँ मैं क्या करने की कोशिश करता हूं।

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

अपेक्षित उत्पादन:

<h1>Hello</h1>

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

Comments

रिएक्ट / जेएसएक्स डायनेमिक कंपोनेंट नामों

— जॉर्डन रनिंग

Answer 1

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

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

<CustomTag>Hello</CustomTag>

Comments

निश्चित रूप से आसान है React.createClass, मैं इस तरह से पसंद करता हूं। धन्यवाद।

— वडकोरक्वेस्ट

@zerkms क्या आपके पास कोई विचार है कि CustomTag में विशेषताएँ कैसे जोड़ें? धन्यवाद

— सबरीना लुओ

@Sabrina<CustomTag foo="bar">

— zerkms

हुह। यह कैसे काम करता है? यदि चर नाम को कम किया जाता है, तो यह केवल एक टैग के रूप में सम्मिलित करता है (जैसे। यदि यह कस्टमटैग था, तो मुझे <customtag> Hello </ customtag>) मिलेगा। क्या यह कहीं भी प्रलेखित है?

— इब्राहिम

यदि घटक किसी ऑब्जेक्ट की संपत्ति में संग्रहीत है, तो एक पूंजी पहला अक्षर आवश्यक नहीं है। var foo = { bar: CustomTag }; return <foo.bar />ठीक काम करता है।

— 19'18

Answer 2

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

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

यह एक नया चर या घटक बनाने से बचता है।

सहारा के साथ:

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

---

से डॉक्स :

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

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

Answer 3

यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो आपको इस तरह एक त्रुटि दिखाई देगी:

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

टाइपस्क्रिप्ट को पता नहीं है कि CustomTagएक वैध HTML टैग नाम है और एक त्रुटिहीन त्रुटि फेंकता है।

ठीक करने के लिए, के CustomTagरूप में डाली keyof JSX.IntrinsicElements!

const CustomTag = `h${this.props.priority}` as keyof JSX.IntrinsicElements;

<CustomTag>Hello</CustomTag>

Comments

मैं टाइपस्क्रिप्ट पर हूँ, लेकिन यह कास्टिंग यह त्रुटि देता है:Types of property 'crossOrigin' are incompatible. Type 'string | undefined' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'. Type 'string' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.

— Poyrazoğlu कर सकते हैं

Answer 4

अन्य सभी उत्तर ठीक काम कर रहे हैं, लेकिन मैं कुछ अतिरिक्त जोड़ूंगा, क्योंकि ऐसा करने से:

1. यह थोड़ा सुरक्षित है। यहां तक ​​कि अगर आपकी टाइप-चेकिंग विफल हो रही है, तब भी आप एक उचित घटक वापस करते हैं।
2. यह अधिक घोषणात्मक है। इस घटक को देखकर कोई भी यह देख सकता है कि यह क्या वापसी कर सकता है।
3. 'H1', 'h2' के बजाय इसका उदाहरण अधिक लचीला है, ... आपके हेडिंग के प्रकार के लिए आपके पास कुछ अन्य अमूर्त अवधारणाएं 'sm', 'lg' या 'प्राथमिक', 'secondary' हो सकती हैं

शीर्षक घटक:

import React from 'react';

const elements = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
};

function Heading({ type, children, ...props }) {    
  return React.createElement(
    elements[type] || elements.h1, 
    props, 
    children
  );
}

Heading.defaultProps = {
  type: 'h1',
};

export default Heading;

जिसे आप जैसे चाहे उपयोग कर सकते है

<Heading type="h1">Some Heading</Heading>

या आपके पास एक अलग सार अवधारणा हो सकती है, उदाहरण के लिए आप एक आकार के आकार को परिभाषित कर सकते हैं जैसे:

import React from 'react';

const elements = {
  xl: 'h1',
  lg: 'h2',
  rg: 'h3',
  sm: 'h4',
  xs: 'h5',
  xxs: 'h6',
};

function Heading({ size, children }) {
  return React.createElement(
    elements[size] || elements.rg, 
    props, 
    children
  );
}

Heading.defaultProps = {
  size: 'rg',
};

export default Heading;

जिसे आप जैसे चाहे उपयोग कर सकते है

<Heading size="sm">Some Heading</Heading>

Answer 5

गतिशील शीर्षकों (h1, h2 ...) की आवृत्ति में , एक घटक वापस आ सकता है React.createElement( फेलिक्स द्वारा ऊपर उल्लेख किया गया है )।

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

कंपोज़ीबिलिटी के लिए, प्रॉप्स और बच्चे दोनों पास किए जाते हैं।

उदाहरण देखें