माता-पिता के टैग में लपेटे बिना मैं सिबलिंग तत्वों को कैसे प्रस्तुत करूं?

Question 1

ज्यादातर मामलों में, माता-पिता का टैग होना कोई समस्या नहीं है।

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

लेकिन कुछ मामले ऐसे होते हैं, जिनमें एक अभिभावक के बिना एक रेंडर फंक्शन में सिबलिंग एलीमेंट्स का होना मायने रखता है, और विशेष रूप से टेबल के मामले में, आप टेबल रो को एक में लपेटना नहीं चाहते हैं div।

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

दूसरा उदाहरण निम्नलिखित त्रुटि देता है Adjacent XJS elements must be wrapped in an enclosing tag while parsing file:।

मैं दो भाई तत्वों को एक <div>या कुछ समान में लपेटे बिना कैसे प्रस्तुत कर सकता हूं ?

Question 2

यह वर्तमान में एक सीमा है, लेकिन भविष्य में कुछ बिंदु पर निश्चित रूप से तय किया जाएगा ( गीथब रेपो पर कुछ खुले मुद्दे हैं )।

अभी के लिए, आप एक फ़ंक्शन का उपयोग कर सकते हैं जो एक सरणी देता है (यह मूल रूप से एक स्टेटलेस घटक है):

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

और अपने घटक में उपयोग करें।

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

अपडेट करें

प्रतिक्रिया 16 में आप रेंडर से एक सरणी वापस करने में सक्षम होंगे।

एक और अपडेट

अब आप या तो एक शीर्ष स्तरीय सरणी वापस कर सकते हैं, या उपयोग कर सकते हैं <React.Fragment> ।

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

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

इसके साथ React.Fragment, यह बहुत अधिक व्यवहार करता है जैसे कि इसे <div>या इसी तरह से लपेटना , जहां keyहमें बच्चों को गतिशील रूप से नहीं बनाने की आवश्यकता नहीं है। सबसे पहले, हम सरणी को एक टुकड़े में लपेट सकते हैं:

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

और फिर हम सरणी को keyपूरी तरह से समाप्त कर सकते हैं :

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

Question 3

मुझे पता है कि यह एक पुराना पद रहा है, लेकिन शायद मेरा जवाब मेरे जैसे नए लोगों के लिए मददगार हो सकता है।

प्रतिक्रिया 16.2 में, Fragments के लिए बेहतर समर्थन जोड़ा गया था।

अब आप इसे इस तरह वापस कर सकते हैं:

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

आप इसे <></>या के साथ लपेट कर सकते हैं <Fragment></Fragment>।

यदि आप कुछ विशेषताओं को पारित करना चाहते हैं, तो लेखन के समय केवल कुंजी का समर्थन किया जाता है, और आपको इसका उपयोग करना होगा <Fragment />क्योंकि लघु वाक्यविन्यास <></>विशेषताओं को स्वीकार नहीं करता है।

नोट: यदि आप शॉर्ट सिंटैक्स का उपयोग करने जा रहे हैं, तो सुनिश्चित करें कि आप बैबल 7 का उपयोग कर रहे हैं ।

स्रोत संदर्भ

Question 4

वू हू! रिएक्ट टीम ने आखिरकार इस फीचर को जोड़ा। प्रतिक्रिया v16.0 के अनुसार, आप कर सकते हैं:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

"नया रेंडर रिटर्न प्रकार: टुकड़े और तार" यहां बताते हुए पूरा ब्लॉग पोस्ट देखें ।

Question 5

एक मूल तत्व होने के नाते ज्यादातर मामलों में सहायक होता है, उदाहरण के लिए, आपके पास एक मूल वर्ग नाम हो सकता है हो सकता है जो बच्चों के तत्वों की शैली और कुछ अन्य परिदृश्यों को लक्षित कर सकता है ...

लेकिन, यदि आप वास्तव में ऐसा नहीं करना चाहते हैं, तो आप उपयोग कर सकते हैं React.Fragment

तो बस कुछ इस तरह से करें:

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

16.2 संस्करण से , एक छोटा संस्करण भी उपयोग कर रहा है <>, जो रेंडर फ़ंक्शन में इस तरह दिखता है:

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

इसके अलावा, अगर संस्करण 16.0 और इसके बाद के संस्करण का उपयोग करते हैं, तो आप उन तत्वों की सरणी वापस कर सकते हैं, जिन्हें नीचे की तरह माता-पिता के आवरण की भी आवश्यकता नहीं है:

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

Question 6

आप इसे इस तरह कोष्ठक में लपेट सकते हैं:

React.createClass({
    render: function() {
        return (
          [
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
          ]
        );
    }
});

Question 7

यह उदाहरण मेरे लिए अच्छा है:

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

Question 8

कुछ इस वाक्य रचना ने मेरे लिए काम किया

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

Question 9

टाइपस्क्रिप्ट का उपयोग करने वालों के लिए, सही सिंटैक्स है:

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];