प्रतिक्रिया में अतिरिक्त रैपिंग <div> से कैसे बचें?

113

आज मैंने ReactJS सीखना शुरू कर दिया है और एक घंटे के बाद समस्या का सामना करना पड़ा है। मैं एक घटक सम्मिलित करना चाहता हूं जिसमें पृष्ठ पर एक div के अंदर दो पंक्तियाँ हैं। मैं नीचे क्या कर रहा हूं इसका सरलीकृत उदाहरण।

मेरे पास एक HTML है:

<html>
..
  <div id="component-placeholder"></div>
..
</html>

इस तरह रेंडर समारोह:

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

और नीचे मैं रेंडर कह रहा हूं:

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

उत्पन्न HTML इस तरह दिखता है:

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

समस्या यह है कि मैं एक बहुत खुश नहीं हूँ कि रिएक्ट ने मुझे एक "डेडसिमप्लेकम्पोनेंट" डिव में लपेटने के लिए मजबूर किया। स्पष्ट DOM जोड़तोड़ के बिना, इसके लिए सबसे अच्छा और सरल उपाय क्या है?

UPDATE 7/28/2017: रिएक्टर के रखवालों ने रिएक्ट 16 बीटा 1 में उस संभावना को जोड़ा

प्रतिक्रिया 16.2 के बाद से , आप यह कर सकते हैं:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

javascript reactjs

— किरिल रेजनिकोव
स्रोत

4

सही नामकरण अभ्यास ;-)

— किरिल रेजनिकोव

क्या मैं आपकी HTML फ़ाइल देख सकता हूँ? मैंने आपके प्रश्न को गलत पढ़ा। हालाँकि मुझे वर्कअराउंड हो सकता है।

— लुई ३

इस तरह Smth: jsfiddle.net/qawumm3v

— किरिल Reznikov

आप एक घटक के साथ एक तत्व है एक समस्या है? वास्तव में?

— डोमिनिक

आपका क्या अर्थ है? मैं सिर्फ रिएक्ट की कोशिश कर रहा हूं, यह बहुत जटिल नहीं होना चाहिए .. लेकिन सीमा कष्टप्रद लगती है।

— किरिल रेजनिकोव

142

प्रतिक्रिया संस्करण (16.0)] 1 में इस आवश्यकता को हटा दिया गया था , इसलिए अब आप उस आवरण से बचने में सक्षम हैं।

आप पैरेंट नोड बनाए बिना तत्वों की सूची प्रस्तुत करने के लिए React.Fragment का उपयोग कर सकते हैं, आधिकारिक उदाहरण:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

यहाँ और अधिक: टुकड़े

— लुगर
स्रोत

1

बड़ी खबर दिमित्रीयूलनेट्स। क्या कोई नियोजित रिलीज की तारीख है?

— जोनास कार्लबाम

यह 26 सितंबर, 2017 से जारी है, इस पर प्रतिक्रियाjs.org/blog/2017/09/26/react-v16.0.html

— टॉम

56

अद्यतन 2017-12-05: प्रतिक्रिया v16.2.0 अब पूरी तरह से बच्चों में चाबियों को निर्दिष्ट किए बिना एक घटक रेंडर विधि से कई बच्चों को वापस करने के लिए बेहतर समर्थन के साथ टुकड़ों के प्रतिपादन का समर्थन करता है:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

यदि आप v16.2.0 से पहले एक प्रतिक्रिया संस्करण का उपयोग कर रहे हैं, तो <React.Fragment>...</React.Fragment>इसके बजाय इसका उपयोग करना भी संभव है :

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

मूल:

प्रतिक्रिया v16.0 ने div में लपेटे बिना रेंडर विधि में तत्वों की एक सरणी लौटाया: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

फिलहाल, मुख्य चेतावनी से बचने के लिए प्रत्येक तत्व के लिए एक कुंजी की आवश्यकता होती है, लेकिन इसे भविष्य के रिलीज में बदला जा सकता है:

भविष्य में, हम JSX के लिए एक विशेष खंड सिंटैक्स जोड़ेंगे, जिसमें कुंजियों की आवश्यकता नहीं है।

— टॉम
स्रोत

<> </> का नया शॉर्टहैंड सिंटैक्स बढ़िया है। मैं अभी भी इसके बारे में बहुत मिश्रित भावना रखता हूं।

— थुलानी चिवंडिक्वा

@ThulaniChivandikwa क्या आप शॉर्टहैंड सिंटैक्स के बारे में अपनी गलतफहमी को आवाज़ देना चाहेंगे?

— टॉम

1

मुझे लगता है कि यह JSX में एक खाली टैग की अवधारणा के बारे में अधिक है और बहुत सहज नहीं है जब तक कि आपको यह पता नहीं है कि यह वास्तव में क्या करता है।

— थुलानी चिवंडिक्वा

7

आप उपयोग कर सकते हैं:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

अधिक जानकारी के लिए इस दस्तावेज को देखें ।

— रोलैंडो सिंट्रॉन
स्रोत

3

पूरे रिटर्न को लपेटने के लिए () के बजाय [] का उपयोग करें।

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

— माइकल कुनेओ
स्रोत

2

मैंने DIV के बिना बाल घटकों को लपेटने के लिए एक घटक बनाया। इसे एक छाया आवरण कहा जाता है: https://www.npmjs.com/package/react-shadow-wrapper

— मैट लैंडर्स
स्रोत

मैंने आपके पैकेज पर एक समस्या पोस्ट की है, क्या आप कृपया देख सकते हैं? धन्यवाद

— एंटोनी ४

1

यह अभी भी आवश्यक है , लेकिन BUT React अब अतिरिक्त DOM तत्व बनाए बिना तत्वों को बनाना सुनिश्चित करता है।

अतिरिक्त रैपिंग की आवश्यकता (आमतौर पर एक अभिभावक के साथ div) क्योंकि रिएक्ट्स createElementविधि को एक typeपैरामीटर की आवश्यकता होती है जो कि है either a tag name string (such as 'div' or 'span'), a React component type (a class or a function)। लेकिन इससे पहले कि वे रिएक्ट का परिचय देते Fragment।

CreateElement के लिए इस नए एपीआई डॉक्टर का संदर्भ लें

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

यहाँ आधिकारिक उदाहरण है, प्रतिक्रिया का संदर्भ दें ।

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

— प्रधान
स्रोत

0

आप उस divतत्व से छुटकारा नहीं पा सकेंगे । React.render () को एक मान्य DOM नोड वापस करना होगा।

— हेनरिक एंडरसन
स्रोत

डिव की उपेक्षा की जाती है, नॉकआउट। जेएस एक ही काम करता है। अपने घटक प्रभाव के बाहरी हिस्से पर कोई स्टाइल नहीं के साथ एक div होने से कुछ भी नहीं होता है।

— क्रिस हॉक्स

16

@ क्रिसहॉक्स, असहमत। एक रैपर div सीएसएस चयनकर्ताओं को प्रभावित करता है।

— Downhillski

शब्दार्थ तत्वों के साथ काम करते समय, कि आप पूरी तरह से प्रतिक्रियाशील घटक नहीं बनना चाहते हैं, यह एक मुद्दा बन जाता है। कहते हैं कि हेडर और पाद लेख तत्वों के साथ एक अनुभाग-टैग है, और उनके बीच एक गूगल मैप-कंटेनर है, जिसे हम रिएक्ट के भीतर उपयोग नहीं करना चाहते हैं। फिर एक रिएक्ट घटक के रूप में हेडर और एक रिएक्टर घटक के रूप में पाद लेख के लिए अच्छा होगा, अतिरिक्त div को शामिल किए बिना: प्रतिक्रिया घटकों के अंदर बाहर है ... यह सादे बेवकूफ डिजाइन है, अगर आप html के बारे में बिल्कुल भी ध्यान रखते हैं आप आउटपुट ...

— जोनास कार्लबाम

0

यहाँ "ट्रांसकुलेंट" घटकों को प्रस्तुत करने का एक तरीका है:

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

— Ярослав Рахматуллин
स्रोत

0

वर्कअराउंड भी है। नीचे ब्लॉक कोड React.Fragment की आवश्यकता के बिना टुकड़ा उत्पन्न करता है।

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})

— इरफ़ान सीदीपुर
स्रोत

0

मुझे पता है कि इस सवाल का जवाब दिया गया है, आप निश्चित रूप से React.Fragment का उपयोग कर सकते हैं जो एक नोड नहीं बनाता है, लेकिन चलिए आपको एक div की तरह समूह सामान बनाते हैं।

इसके अतिरिक्त यदि आप मज़े करना चाहते हैं (तो आप बहुत सारी चीजें लागू कर सकते हैं और सीख सकते हैं) एक रिएक्ट मोड जो अतिरिक्त डिव को हटाता है और इसके लिए मैं वास्तव में एक शानदार वीडियो साझा करना चाहता हूं कि आप इसे रिएक्शन कोड बेस पर कैसे कर सकते हैं।

https://www.youtube.com/watch?v=aS41Y_eyNrU

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

— गेब्रियल पी।
स्रोत