"कॉमा ऑपरेटर के बाईं तरफ .."

Question

प्रस्तुत करने की HTML सामग्री में त्रुटि इसकी सीधी प्रक्रिया;

यहाँ मूल विधि मैं इसे होना चाहते हैं प्रस्तुत करना है (मैं div के बाहर मेरी मेज चाहते हैं):

लेकिन jsx संकलक न किसी कारण से इसे अनुमति?

लेकिन यदि मैं div तत्व के अंदर तालिका को स्थानांतरित करता हूं; सबकुछ ठीक दिखता है।

इसलिए केवल diff तालिका का स्थान है। जेएसएक्स इस प्रक्रिया में हस्तक्षेप क्यों करता है? यह जरूरी क्यों है?

Answer 1

JSX में, हम return से केवल एक ही html तत्व लौट सकते हैं, एक से अधिक तत्वों वापस नहीं लौट सकते, यदि आप वापस जाने के लिए एक से अधिक तत्वों तो एक div में या किसी अन्य आवरण घटक द्वारा सभी एचटीएमएल कोड लपेट चाहते हैं।

वही बात आपके पहले मामले में हो रही है, आप 2 तत्व लौट रहे हैं, एक div और एक table। जब आप उन्हें div में लपेट रहे हैं तो सब ठीक से काम कर रहा है।

वही नियम आपको conditional rendering घटकों के लिए पालन करना होगा।

उदाहरण:

सही:

{ 1==1 /* some condition */ ? 
    <div> 
     True 
    </div> 
: 
    <div> 
     False 
    </div> 
} 

गलत:

{ 1==1 /* some condition */ ? 
    <div> 
     True 1 
    </div> 
    <div> 
     True 2 
    </div> 
: 
    <div> 
     False 1 
    </div> 
    <div> 
     False 2 
    </div> 
} 

Answer 2

बस एक त्वरित अद्यतन। यदि आप रिएक्ट v16.2.0 और ऊपर का उपयोग कर रहे हैं तो आप Fragments का भी उपयोग कर सकते हैं।

return (
    <> 
     <div> 
      True 1 
     </div> 
     <div> 
      True 2 
     </div> 
    </> 
);