React
JSX

टिप्पणियों

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

const element = <h1>Hello, world!</h1>;

JSX में सहारा

JSX में प्रॉपर निर्दिष्ट करने के लिए कई अलग-अलग तरीके हैं।

जावास्क्रिप्ट अभिव्यक्तियाँ

आप किसी भी जावास्क्रिप्ट अभिव्यक्ति को एक प्रस्ताव के रूप में पास कर सकते हैं, इसके आसपास {} उदाहरण के लिए, इस JSX में:

<MyComponent count={1 + 2 + 3 + 4} />

MyComponent अंदर, props.count का मान 10 होगा, क्योंकि अभिव्यक्ति 1 + 2 + 3 + 4 मूल्यांकन किया जाता है।

यदि कथन और लूप के लिए जावास्क्रिप्ट में अभिव्यक्ति नहीं है, तो वे सीधे JSX में उपयोग नहीं किए जा सकते हैं।

स्ट्रिंग साहित्य

बेशक, आप किसी भी string literal को एक prop रूप में भी पारित कर सकते हैं। ये दो JSX भाव समतुल्य हैं:

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

जब आप एक स्ट्रिंग शाब्दिक पास करते हैं, तो इसका मान एचटीएमएल-अनस्कैप्ड होता है। तो ये दो JSX भाव समतुल्य हैं:

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

यह व्यवहार आमतौर पर प्रासंगिक नहीं है। यह केवल पूर्णता के लिए यहां उल्लिखित है।

प्रॉप्स डिफ़ॉल्ट मान

यदि आप किसी प्रस्ताव के लिए कोई मूल्य नहीं देते हैं, तो यह true लिए चूक true । ये दो JSX भाव समतुल्य हैं:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

हालांकि, रिएक्ट टीम का कहना है कि इस दृष्टिकोण का उपयोग करने वाले डॉक्स की सिफारिश नहीं की जाती है , क्योंकि इसे ES6 ऑब्जेक्ट शॉर्टहैंड {foo} साथ भ्रमित किया जा सकता है, जो {foo: true} बजाय {foo: foo} लिए कम है। वे कहते हैं कि यह व्यवहार सिर्फ इतना है कि यह HTML के व्यवहार से मेल खाता है।

फैले हुए गुण

यदि आपके पास पहले से ही एक ऑब्जेक्ट के रूप में प्रॉप्स हैं, और आप इसे JSX में पास करना चाहते हैं, तो आप ... पूरे प्रॉप्स ऑब्जेक्ट को पास करने के लिए एक प्रसार ऑपरेटर के रूप में उपयोग कर सकते हैं। ये दो घटक समतुल्य हैं:

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}

जेएसएक्स में बच्चे

JSX अभिव्यक्तियों में जिसमें एक ओपनिंग टैग और एक क्लोजिंग टैग शामिल हैं, उन टैग्स के बीच की सामग्री को एक विशेष प्रोप के रूप में पास किया जाता है: props.children । बच्चों को पास करने के कई अलग-अलग तरीके हैं:

स्ट्रिंग साहित्य

आप खुलने और बंद होने वाले टैग और props.children बीच एक स्ट्रिंग लगा सकते हैं। props.children को बस वह स्ट्रिंग होगी। यह अंतर्निहित HTML तत्वों में से कई के लिए उपयोगी है। उदाहरण के लिए:

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

यह मान्य props.children , और props.children में props.children बस <h1>Hello world!</h1> ।

ध्यान दें कि HTML बिना लिखा हुआ है, इसलिए आप आम तौर पर JSX लिख सकते हैं जैसे आप HTML लिखेंगे।

ध्यान में रखिए, इस मामले में JSX:

• एक लाइन की शुरुआत और अंत में व्हॉट्सएप हटाता है;
• रिक्त लाइनों को हटाता है;
• टैग से सटे नई लाइनें हटा दी जाती हैं;
• स्ट्रिंग लिटरल्स के बीच में होने वाली नई लाइनों को एक ही स्थान पर संघनित किया जाता है।

JSX बच्चे

आप बच्चों के रूप में अधिक JSX तत्व प्रदान कर सकते हैं। यह नेस्टेड घटकों को प्रदर्शित करने के लिए उपयोगी है:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

आप विभिन्न प्रकार के बच्चों को एक साथ मिला सकते हैं , इसलिए आप JSX बच्चों के साथ मिलकर स्ट्रिंग शाब्दिक का उपयोग कर सकते हैं । यह एक और तरीका है जिसमें JSX HTML की तरह है, ताकि यह मान्य JSX और वैध HTML दोनों हो:

<div>
  <h2>Here is a list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

ध्यान दें कि एक रिएक्ट घटक कई रिएक्ट तत्वों को वापस नहीं कर सकता है, लेकिन एक एकल JSX अभिव्यक्ति में कई बच्चे हो सकते हैं । इसलिए यदि आप कई चीजों को रेंडर करने के लिए एक घटक चाहते हैं, तो आप उन्हें ऊपर दिए गए उदाहरण की तरह एक div में लपेट सकते हैं।

जावास्क्रिप्ट अभिव्यक्तियाँ

आप किसी भी जावास्क्रिप्ट अभिव्यक्ति को बच्चों के रूप में पारित कर सकते हैं, इसे {} भीतर संलग्न करके। उदाहरण के लिए, ये भाव समतुल्य हैं:

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

यह अक्सर मनमानी लंबाई की JSX अभिव्यक्तियों की सूची प्रदान करने के लिए उपयोगी है। उदाहरण के लिए, यह एक HTML सूची प्रस्तुत करता है:

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

ध्यान दें कि जावास्क्रिप्ट अभिव्यक्तियों को अन्य प्रकार के बच्चों के साथ मिलाया जा सकता है।

बच्चे के रूप में कार्य

आम तौर पर, JSX में सम्मिलित जावास्क्रिप्ट एक्सप्रेशंस एक स्ट्रिंग, एक रिएक्ट एलिमेंट, या उन चीजों की एक सूची का मूल्यांकन करेगा। हालाँकि, props.children किसी अन्य प्रोप की तरह ही काम करता है कि यह किसी भी प्रकार के डेटा को पारित कर सकता है, न कि केवल उस प्रकार को जो रिएक्ट जानता है कि कैसे रेंडर करना है। उदाहरण के लिए, यदि आपके पास कोई कस्टम घटक है, तो आप इसे props.children रूप में कॉलबैक ले सकते हैं:

const ListOfTenThings = () => (
  <Repeat numTimes={10}>
    {(index) => <div key={index}>This is item {index} in the list</div>}
  </Repeat>
);

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

एक कस्टम घटक में उत्तीर्ण बच्चे कुछ भी हो सकते हैं, जब तक कि घटक उन्हें किसी चीज़ में बदल देता है जब तक कि रेंडर करने से पहले प्रतिक्रिया समझ में आ जाए। यह उपयोग आम नहीं है, लेकिन यह काम करता है यदि आप जेएसएक्स में सक्षम होना चाहते हैं।

उपेक्षित मान

ध्यान दें कि false , null , undefined और true बच्चे वैध हैं। लेकिन वे बस प्रस्तुत नहीं करते। ये JSX एक्सप्रेशन सभी एक ही चीज़ को प्रस्तुत करेंगे:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

यह प्रतिक्रियाशील तत्वों को सशर्त रूप से प्रस्तुत करने के लिए बेहद उपयोगी है। यह showHeader केवल एक रेंडर करता है यदि showHeader सच है:

<div>
  {showHeader && <Header />}
  <Content />
</div>

एक महत्वपूर्ण चेतावनी यह है कि कुछ "झूठे" मान, जैसे 0 नंबर, अभी भी प्रतिक्रिया द्वारा प्रदान किए जाते हैं। उदाहरण के लिए, यह कोड वैसा व्यवहार नहीं करेगा जैसा आप उम्मीद कर सकते हैं क्योंकि 0 तब props.messages जब props.messages एक खाली सरणी है:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

इसे ठीक करने के लिए एक दृष्टिकोण यह सुनिश्चित करना है कि && से पहले की अभिव्यक्ति हमेशा बूलियन है:

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

अंत में, यह ध्यान में रखते हुए कि यदि आप आउटपुट में false , true , null या undefined जैसे मान चाहते हैं, तो आपको इसे पहले एक स्ट्रिंग में बदलना होगा:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>