प्रतिक्रिया में एक और रिटर्न स्टेटमेंट में कई लाइनों JSX को कैसे लौटाएं?

Question 1

सिंगल लाइन ठीक काम करती है

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

कई लाइनों के लिए नहीं

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

धन्यवाद।

Question 2

फ़ंक्शन कॉल ( डॉक्स देखें ) के रूप में टैग के बारे में सोचने की कोशिश करें । फिर पहला बन जाता है:

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

और दूसरा एक:

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

अब यह स्पष्ट होना चाहिए कि दूसरा स्निपेट वास्तव में कोई मतलब नहीं है (आप जेएस में एक से अधिक मूल्य वापस नहीं कर सकते हैं)। आपको इसे किसी अन्य तत्व में लपेटना होगा (सबसे अधिक संभावना है कि आप क्या चाहते हैं, इस तरह से आप एक वैध keyसंपत्ति भी प्रदान कर सकते हैं), या आप इस तरह से कुछ का उपयोग कर सकते हैं:

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

JSX चीनी के साथ:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

आपको परिणामी सरणी को समतल करने की आवश्यकता नहीं है, रिएक्ट आपके लिए ऐसा करेगा। निम्नलिखित फिडल देखें http://jsfiddle.net/mEB2V/1/ । फिर से: दो तत्वों को एक div / अनुभाग में लपेटने से सबसे बेहतर होगा दीर्घकालिक।

Question 3

ऐसा लगता है कि एक सरणी वापस करने के बारे में पुराना उत्तर अब लागू नहीं होता है (शायद रिएक्ट ~ 0.9 के बाद से, जैसा कि @ dogmatic69 ने एक टिप्पणी में लिखा है )।

डॉक्स का कहना है कि आपको एक नोड वापस करने की आवश्यकता है:

JSX रूट नोड्स की अधिकतम संख्या

वर्तमान में, एक घटक के रेंडर में, आप केवल एक नोड वापस कर सकते हैं; यदि आपके पास लौटने के लिए divs की सूची है, तो आपको अपने कंपोनेंट्स को div, स्पैन या किसी अन्य कंपोनेंट में लपेटना होगा।

यह मत भूलो कि JSX नियमित JS में संकलित है; दो कार्यों को वापस करना वास्तव में वाक्यात्मक अर्थ नहीं बनाता है। इसी तरह, एक से अधिक बच्चों को टर्नरी में न डालें।

कई मामलों में आप बस चीजों को एक <div>या एक में लपेट सकते हैं <span>।

मेरे मामले में, मैं कई <tr>एस वापस करना चाहता था । मैंने उन्हें एक में लपेटा <tbody>- एक टेबल में कई शव रखने की अनुमति है।

संपादित करें: प्रतिक्रिया के रूप में 16.0, एक सरणी को लौटाने की स्पष्ट रूप से फिर से अनुमति दी जाती है, जब तक कि प्रत्येक तत्व में एक key: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html # नई प्रस्तुत करना-रिटर्न-प्रकार-टुकड़े और तार

संपादित करें: प्रतिक्रिया 16.2 आपको तत्वों की एक सूची के साथ <Fragment>…</Fragment>या यहाँ तक <>…</>कि अगर आप एक सरणी के लिए पसंद करते हैं: https://blog.jmes.tech/react-fragment-and-semantic-html/

Question 4

से v16.0.0 प्रतिक्रिया के बाद, यह एक के भीतर उन्हें लपेटकर द्वारा वापसी से अधिक तत्वों के लिए संभव हैArray

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

इसके अलावा React v16.2.0 से , एक नया फीचर React Fragmentsपेश किया जाता है जिसे आप कई तत्वों को लपेटने के लिए उपयोग कर सकते हैं

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

प्रलेखन के अनुसार:

रिएक्ट में एक सामान्य पैटर्न एक घटक के लिए कई तत्वों को वापस करने के लिए है। टुकड़े आपको DOM में अतिरिक्त नोड्स जोड़े बिना बच्चों की एक सूची बनाने की सुविधा देते हैं।

स्पष्ट वाक्य रचना के साथ घोषित किए गए अंशों में कुंजी हो सकती है। इसके लिए एक उपयोग का मामला संग्रह के टुकड़े को सरणी में बदल रहा है - उदाहरण के लिए, विवरण सूची बनाने के लिए:
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
कुंजी एकमात्र विशेषता है जिसे फ्रैगमेंट में पारित किया जा सकता है। भविष्य में, हम अतिरिक्त विशेषताओं के लिए समर्थन जोड़ सकते हैं, जैसे कि ईवेंट हैंडलर।

Question 5

इसके अलावा, आप एक प्रतिक्रिया घटक के अंदर कुछ सहायक कार्यों में कई सूची आइटम वापस करना चाह सकते हैं। keyविशेषता के साथ html नोड्स की एक सरणी लौटाएँ:

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

Question 6

आप createFragmentयहाँ उपयोग कर सकते हैं ।

https://facebook.github.io/react/docs/create-fragment.html

import createFragment from 'react-addons-create-fragment';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

(यहां ES6 और JSX सिंटैक्स का उपयोग करके)

आपको पहले react-addons-create-fragmentपैकेज जोड़ना होगा :

npm install --save react-addons-create-fragment

जन ओलाफ क्रेम्स के समाधान पर लाभ: प्रतिक्रिया लापता के बारे में शिकायत नहीं करती है key

Question 7

अपडेट किया गया

रिएक्ट फ्रैगमेंट का उपयोग करें। यह आसान है। टुकड़ा प्रलेखन के लिए लिंक ।

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

पुराना उत्तर - अप्रचलित

प्रतिक्रिया> 16 के साथ आप प्रतिक्रिया-मिश्रित का उपयोग कर सकते हैं ।

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

बेशक, प्रतिक्रिया-समग्र स्थापित किया जाना है।

npm install react-composite --save

Question 8

यह प्रतिक्रिया टुकड़े द्वारा सरल है <></>और React.Fragment:

return (
    <>
      {[1, 2, 3].map(
        (n, index): ReactElement => (
          <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
          </React.Fragment>
        ),
      )}
    </>
  );