पार्स त्रुटि: आसन्न JSX तत्वों को एक संलग्न टैग में लपेटा जाना चाहिए

Question

मैं अपना React.jsऐप सेट करने का प्रयास कर रहा हूं ताकि यह केवल तभी प्रस्तुत हो जब एक चर मेरे पास है true।

जिस तरह से मेरा रेंडर फ़ंक्शन सेट किया गया है वह ऐसा दिखता है:

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>

if(this.state.submitted==false) 
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

मूल रूप से, यहाँ महत्वपूर्ण भाग वह if(this.state.submitted==false)भाग है (मैं चाहता हूं कि divजब प्रस्तुत चर सेट हो तो ये तत्व दिखायें false)।

लेकिन इसे चलाते समय, मुझे प्रश्न में त्रुटि मिलती है:

अनकवर्ड एरर: पार्स एरर: लाइन 38: आसन्न JSX एलिमेंट्स को एनक्लोजिंग टैग में लपेटा जाना चाहिए

यहाँ क्या मुद्दा है? और इस काम को करने के लिए मैं क्या उपयोग कर सकता हूं?

Comments

stackoverflow.com/questions/25034994/… यहाँ अन्य लोग आपको केवल मूल तत्व का उपयोग करने के लिए कह रहे हैं, लेकिन यह अनावश्यक हो सकता है। आपके प्रश्न के पुराने संस्करण में सरणियों का उपयोग करके एक दिलचस्प उत्तर है।

— मेव

Answer 1

आपको अपने घटक को एक संलग्न टैग के बीच रखना चाहिए, जिसका अर्थ है:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

बजाय:

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

संपादित करें: प्रति एपीआई एपीआई के बारे में जो क्ले की टिप्पणी

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

Comments

क्या होगा अगर मैं एक तालिका में 2 पंक्तियों को एक साथ मुद्रित कर रहा हूं। मैं <tr> को कैसे लपेट सकता हूं?

— जोस

Answer 2

इस प्रश्न का उत्तर देने की देर है लेकिन मुझे लगा कि यह स्पष्टीकरण में जोड़ देगा।

यह इसलिए हो रहा है क्योंकि आपके कोड में कोई भी जहां आप दो तत्वों को एक साथ वापस कर रहे हैं।

जैसे

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

इसे मूल तत्व में लपेटा जाना चाहिए । जैसे

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

---

अधिक विस्तृत व्याख्या

आपका नीचे का jsxकोड रूपांतरित हो जाता है

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

इस मामले में

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

लेकिन अगर आप ऐसा करते हैं

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
        <div>Hi</div>
    );
  }
}

यह इस में परिवर्तित हो जाता है (उदाहरण के लिए, वास्तव में आपको मिलेगा error : Adjacent JSX elements must be wrapped in an enclosing tag)

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

उपरोक्त कोड में आप देख सकते हैं कि आप मेथड कॉल से दो बार लौटने की कोशिश कर रहे हैं , जो स्पष्ट रूप से गलत है।

संपादित करें- रिएक्ट 16 और स्वयं-वार्ड में नवीनतम परिवर्तन:

यदि आप अपने चारों ओर लपेटने के लिए अतिरिक्त div नहीं जोड़ना चाहते हैं और एक से अधिक बाल घटक वापस करना चाहते हैं तो आप जा सकते हैं React.Fragments।

React.Fragments थोड़े तेज़ होते हैं और उनमें मेमोरी का उपयोग कम होता है (अतिरिक्त DOM नोड बनाने की आवश्यकता नहीं है, कम cluttered DOM ट्री)।

उदा। (प्रतिक्रिया में 16.2.0)

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

या

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    <React.Fragments/>
  );
}

या

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

Answer 3

प्रतिक्रिया तत्व को केवल एक तत्व वापस करना है। आपको अपने दोनों टैग को किसी अन्य तत्व टैग के साथ लपेटना होगा।

मैं यह भी देख सकता हूं कि आपका रेंडर फ़ंक्शन कुछ भी वापस नहीं कर रहा है। यह आपके घटक की तरह दिखना चाहिए:

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

यह भी ध्यान दें कि आप ifदिए गए तत्व के अंदर स्टेटमेंट का उपयोग नहीं कर सकते हैं :

render: function() {
var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    if(this.state.submitted==false) {
        return <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

Comments

यह "यदि" के साथ समस्या को संबोधित नहीं करता है; यदि मैं रेंडर फ़ंक्शन के भीतर "if" हटाता हूं, तो यह ठीक काम करता है।

— user1072337

ध्यान दें कि आप उपयोग नहीं कर सकते हैं अगर प्रतिमा एक तत्व के अंदर है। मेरे अद्यतित उत्तर को देखें

— मटन गुब्किं

Answer 4

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

// Wrong!
return (  
   <Comp1 />
   <Comp2 />
)

इसे इस प्रकार लिखा जा सकता है:

// Correct!
return (  
    [<Comp1 />,
    <Comp2 />]
)

कृपया ध्यान दें कि ऊपर एक चेतावनी उत्पन्न करेगा: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

keyघटकों को एक विशेषता जोड़कर इसे ठीक किया जा सकता है , यदि मैन्युअल रूप से इनको जोड़ने से इसे जोड़ा जाए:

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />]
)

यहाँ कुंजियों के बारे में कुछ और जानकारी दी गई है: रचना बनाम वंशानुक्रम

Comments

मैंने यह कोशिश की और यह मुझे एक त्रुटि देता है। एक वैध प्रतिक्रिया तत्व (या अशक्त) वापस किया जाना चाहिए। आप अपरिभाषित, किसी सरणी या किसी अन्य अमान्य ऑब्जेक्ट को वापस कर सकते हैं।

— प्रसादमव्स

@prasadmsvs +1 invariant.js: 39 अनियंत्रित अपरिवर्तनीय उल्लंघन: कम्फ़र्टलेटर। रेंडर (): एक वैध ReactComponent को वापस करना होगा। आप अपरिभाषित, किसी सरणी या किसी अन्य अमान्य ऑब्जेक्ट को वापस कर सकते हैं।

— स्वेतलाना इवानोवा

यह कई बार के लिए एक महान समाधान है जहाँ आपको एक आवरण तत्व से बचने की आवश्यकता होती है!

— ब्लैडरमिल्क

@aaaaaa यह संभव नहीं है कि जिस तरह से मौजूदा रिएक्ट रिसीलर काम करता है। यह एक स्टैक है और सामंजस्य पुनरावृत्ति किया जाता है। प्रतिक्रिया 16 में यह तय है, और अब आप एक सरणी वापस कर सकते हैं।

— नटनई

github.com/iamdustan/tiny-react-renderer एक उत्कृष्ट रिपॉजिटरी है जिसे प्रत्येक रिएक्शन डेवलपर को पढ़ना चाहिए। एक बार जब आप ऐसा कर लेते हैं, तो आपको तुरंत यह स्पष्ट हो जाना चाहिए कि प्रतिक्रिया का वर्तमान कार्यान्वयन कई बच्चों को वापस करने की अनुमति क्यों नहीं देता है।

— नटनी

Answer 5

समस्या

पार्स त्रुटि: आसन्न JSX तत्वों को एक संलग्न टैग में लपेटा जाना चाहिए

इसका मतलब है कि आप कई sibling JSX तत्वों को गलत तरीके से वापस करने का प्रयास कर रहे हैं। याद रखें कि आप HTML नहीं लिख रहे हैं, लेकिन JSX! आपका कोड JSX से जावास्क्रिप्ट में ट्रांसप्लड है। उदाहरण के लिए:

render() {
  return (<p>foo bar</p>);
}

में स्थानांतरित किया जाएगा:

render() {
  return React.createElement("p", null, "foo bar");
}

जब तक आप सामान्य रूप से प्रोग्रामिंग में नए होते हैं, आप पहले से ही जानते हैं कि फ़ंक्शंस / तरीके (किसी भी भाषा के) किसी भी संख्या में पैरामीटर लेते हैं, लेकिन हमेशा केवल एक ही मान वापस करते हैं । यह देखते हुए, आप संभवतः देख सकते हैं कि कैसे createElement()काम करता है के आधार पर कई भाई घटकों को वापस करने की कोशिश करते समय एक समस्या उत्पन्न होती है ; यह केवल एक तत्व के लिए पैरामीटर लेता है और उसे लौटाता है। इसलिए हम एक फ़ंक्शन कॉल से कई तत्वों को वापस नहीं कर सकते हैं।

---

तो अगर आपने कभी सोचा है कि यह काम क्यों करता है ...

render() {
  return (
    <div>
      <p>foo</p>
      <p>bar</p>
      <p>baz</p>
    </div>
  );
}

लेकिन यह नहीं ...

render() {
  return (
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>
  );
}

यह क्योंकि पहली स्निपेट में दोनों है <p>-elements का हिस्सा हैं childrenके <div>तत्व। जब वे का हिस्सा हैंchildren तब हम असीमित संख्या में सहोदर तत्वों को व्यक्त कर सकते हैं। एक नज़र डालें कि यह कैसे फैल जाएगा:

render() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "foo"),
    React.createElement("p", null, "bar"),
    React.createElement("p", null, "baz"),
  );
}

---

समाधान

आपके द्वारा चलाए जा रहे रिएक्ट के किस संस्करण के आधार पर, आपके पास इसे संबोधित करने के लिए कुछ विकल्प हैं:

• टुकड़ों का उपयोग करें (प्रतिक्रिया v16.2 + केवल!)

  V16.2 प्रतिक्रिया के रूप में, प्रतिक्रिया के लिए समर्थन हासिल है टुकड़े जो एक नोड-कम घटक है जो अपने बच्चों को सीधे लौटाता है।

  एक सरणी में बच्चों को लौटाना (नीचे देखें) में कुछ कमियां हैं:

  • एक सरणी में बच्चों को अल्पविराम से अलग किया जाना चाहिए।
  • ऐरे में बच्चों के पास रिएक्ट की महत्वपूर्ण चेतावनी को रोकने के लिए एक कुंजी होनी चाहिए।
  • स्ट्रिंग्स को उद्धरणों में लपेटा जाना चाहिए।

  ये टुकड़ों के उपयोग से समाप्त हो जाते हैं। यहाँ एक टुकड़े में लिपटे बच्चों का उदाहरण दिया गया है:

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

  कौन सी डी-शक्कर में:

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

  ध्यान दें कि पहले स्निपेट को Babel v7.0 या इसके बाद के संस्करण की आवश्यकता होती है।

  ---

• एक सरणी लौटें (केवल प्रतिक्रिया v16.0 +!)

  प्रतिक्रिया v16 के रूप में, प्रतिक्रिया घटक सरणियाँ वापस कर सकते हैं। यह रिएक्ट के पहले के संस्करणों के विपरीत है, जहां आपको मूल घटक में सभी भाई घटकों को लपेटने के लिए मजबूर किया गया था।

  दूसरे शब्दों में, आप अब कर सकते हैं:

  render() {
    return [<p key={0}>foo</p>, <p key={1}>bar</p>];
  }

  इस में ट्रांसपाइल्स:

  return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")];

  ध्यान दें कि ऊपर एक सरणी देता है। Arrays प्रतिक्रियाशील संस्करण 16 के बाद से और बाद में मान्य रिएक्ट एलिमेंट्स हैं। प्रतिक्रिया के पहले संस्करणों के लिए, सरणियाँ वैध रिटर्न ऑब्जेक्ट नहीं हैं!

  यह भी ध्यान दें कि निम्नलिखित अमान्य है (आपको एक सरणी वापस करनी होगी):

  render() {
    return (<p>foo</p> <p>bar</p>);
  }

  ---

• तत्वों को मूल तत्व में लपेटें

  अन्य समाधान में एक मूल घटक बनाना शामिल है जो सिबलिंग घटकों को अपने में लपेटता है children। यह अब तक इस मुद्दे को संबोधित करने का सबसे आम तरीका है, और प्रतिक्रिया के सभी संस्करणों में काम करता है।

  render() {
    return (
      <div>
        <h1>foo</h1>
        <h2>bar</h2>
      </div>
    );
  }

  नोट: अधिक विवरण के लिए इस उत्तर के शीर्ष पर फिर से एक नज़र डालें और यह कैसे ट्रांसपाइल्स है ।

Comments

@ ग्रीज़हेड, घटकों के लिए नहीं, नहीं। केवल बच्चों के लिए।

— क्रिस

एक अच्छा, मेरे लिए निश्चित मुद्दा।

— सोहन

अन्य समाधान समझाने के लिए समय निकालने के लिए धन्यवाद क्रिस!

— मार्वल मो

प्रतिक्रिया v16.4पर पहला उदाहरण काम नहीं करता है:, <>केवल <React.Fragment>:(

— vsync

@vsync उस सिंटैक्स के लिए समर्थन आपके भवन के वातावरण पर भिन्न होता है। सुनिश्चित नहीं है कि अगर बैबल अभी तक इसका समर्थन करता है, और यदि हां, तो कौन सा संस्करण।

— क्रिस

Answer 6

प्रतिक्रिया 16.0.0 हम एक सरणी के रूप में रेंडर से कई घटक वापस कर सकते हैं।

return ([
    <Comp1 />,
    <Comp2 />
]);

प्रतिक्रिया 16.4.0 हम एक खंड टैग में रेंडर से कई घटकों को वापस कर सकते हैं। टुकड़ा

return (
<React.Fragment>
    <Comp1 />
    <Comp2 />
</React.Fragment>);

Future React आप इस शॉर्टहैंड सिंटैक्स का उपयोग करने में सक्षम होंगे। (कई उपकरण अभी तक इसका समर्थन नहीं करते हैं, इसलिए आप <Fragment>टूलींग को पकड़ने तक स्पष्ट रूप से लिखना चाहते हैं ।

return (
<>
    <Comp1 />
    <Comp2 />
</>)

Comments

आप ,घटकों के बीच भूल गए । यह एक सरणी है इसलिए आपको इसके भीतर प्रत्येक तत्व को अलग करने की आवश्यकता है।

— क्रिस

नहीं है <Fragment>, यह नहीं है <React.Fragment>। आपके अपने लिंक में ऐसा कहता है

— vsync

यदि आप विनाश कर रहे हैं, import React { Fragment } from 'react';तो आप इसे इस तरह से उपयोग करते हैं<Fragment >

— मोरिस एस

Answer 7

यदि आप अपने घटक को नहीं लपेटते हैं तो आप इसे नीचे दी गई विधि के अनुसार लिख सकते हैं।

के बजाय:

return(
  <Comp1 />
  <Comp2 />
     );

आप इसे लिख सकते हैं:

return[(
 <Comp1 />
),
(
<Comp2 />
) ];

Answer 8

यह बहुत ही सरल है हम सभी तत्व को लपेटने के लिए मूल तत्व div का उपयोग कर सकते हैं या हम उच्चतर आदेश घटक (HOC) की अवधारणा का उपयोग कर सकते हैं अर्थात प्रतिक्रिया js अनुप्रयोगों के लिए बहुत उपयोगी है

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

या एक और सबसे अच्छा तरीका है HOC इसकी बहुत सरल है बहुत जटिल नहीं बस अपनी परियोजना में एक फ़ाइल hoc.js जोड़ें और बस इन कोडों को जोड़ें

const aux = (props) => props.children;
export default aux;

अब hoc.js फ़ाइल को आयात करें जहाँ आप उपयोग करना चाहते हैं, अब div एलिमेंट के साथ रैप करने के बजाय हम hoc के साथ रैप कर सकते हैं।

import React, { Component } from 'react';
import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

Comments

हालांकि यह कोड इस सवाल का जवाब दे सकता है कि समस्या को हल करने के तरीके के बारे में अतिरिक्त संदर्भ प्रदान करता है और यह समस्या को हल करता है और उत्तर के दीर्घकालिक मूल्य में सुधार करेगा। इसे पढ़ें ।

— शांतेश्वर इंडे

यह एक HoC नहीं है, यह एक सरल घटक है जो घटक की कार्यक्षमता को डुप्लिकेट करता है Fragment।

— एमिल बर्जरॉन

Answer 9

प्रतिक्रिया में एक नियम है कि एक JSX अभिव्यक्ति में वास्तव में एक बाहरी तत्व होना चाहिए।

गलत

const para = (
    <p></p>
    <p></p>
);

सही बात

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

Answer 10

प्रतिक्रिया 16 को आपकी वापसी एक सरणी के रूप में मिलती है इसलिए इसे div जैसे एक तत्व द्वारा लपेटा जाना चाहिए।

गलत दृष्टिकोण

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

राइट एप्रोच (आपके द्वारा उपयोग किए जा रहे एक div या अन्य तत्व में सभी तत्व)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

Answer 11

रिएक्ट घटकों को एकल कंटेनर में लपेटना चाहिए, जो कि कोई भी टैग हो सकता है जैसे "<div> .. </ div>"

आप ReactCSSTransitionGroup की रेंडर विधि की जांच कर सकते हैं

Answer 12

देखने और लपेटने का आयात करें View। एक में लपेटकर divमेरे लिए काम नहीं किया।

import { View } from 'react-native';
...
    render() {
      return (
        <View>
          <h1>foo</h1>
          <h2>bar</h2>
        </View>
      );
    }

Comments

क्योंकि आप प्रतिक्रिया देशी का उपयोग कर रहे हैं।

— निक एच 247

और टुकड़े भी प्रतिक्रियाशील मूल में उपलब्ध हैं, इसलिए Viewवास्तव में सबसे अच्छा समाधान नहीं है।

— एमिल बर्जरॉन

Answer 13

अमान्य: केवल बाल तत्व नहीं

render(){
        return(
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        )
    }

मान्य: बाल तत्वों के तहत मूल तत्व

render(){
        return(
          <div>
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
          </div>
        )
    }

Comments

कृपया "मुझे भी" प्रकार के उत्तर देने या उसी समाधान को दोहराने से बचें, जब तक कि आपके पास इसे जोड़ने के लिए कुछ प्रासंगिक न हो।

— एमिल बर्जरॉन

Answer 14

Rect-Native Developers के लिए। मैं इस त्रुटि का सामना कर रहा हूँ, जबकि FlatList में। मेरे दो पाठ घटक थे। मैं उन्हें नीचे की तरह इस्तेमाल कर रहा था

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>
}

लेकिन जब मैंने ये टो इनसाइड व्यू कंपोनेंट्स डाले तो यह मेरे लिए काम कर गया।

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

आप अन्य घटकों का उपयोग कर रहे होंगे, लेकिन उन्हें दृश्य में रखकर आपके लिए काम किया जा सकता है।

Comments

अभिक्रियाएँ अभिक्रियाशील मूल में भी उपलब्ध होती हैं, इसलिए Viewवास्तव में सबसे अच्छा समाधान नहीं है।

— एमिल बर्जरॉन

Answer 15

मुझे लगता है कि रिटर्न स्टेटमेंट के भीतर कई डिवाइड को घोंसला बनाने की कोशिश करते समय जटिलता भी हो सकती है। आप अपने घटकों को ब्लॉक तत्वों के रूप में प्रस्तुत करना सुनिश्चित करने के लिए ऐसा करना चाह सकते हैं।

यहां कई विभाजनों का उपयोग करते हुए घटकों के एक जोड़े को सही ढंग से प्रस्तुत करने का एक उदाहरण है।

return (
  <div>
    <h1>Data Information</H1>
    <div>
      <Button type="primary">Create Data</Button>
    </div>
  </div>
)

Answer 16

मुझे एक समस्या थी जिसने इस त्रुटि को उत्पन्न किया जो सभी एक साथ स्पष्ट नहीं था।

const App = () => {
  return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
  )
}

और यहाँ तय था ...

const App = () => {
  return (
      <div className="AppClassName">       <--- note the change
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
  )
}

जाओ पता लगाओ। अन्य लोगों ने इस टक्कर के मामले में यहां साझा की जानकारी। जाहिरा तौर पर, आपके पास एक तत्व वर्ग नाम नहीं हो सकता है जैसा कि इसके रिएक्ट पैरेंट फ़ंक्शन नाम के समान है।

Comments

यह सच नहीं है। यह भी कोडैंडबॉक्स प्रतिक्रिया टेम्पलेट में डिफ़ॉल्ट है। इस वर्गनाम के साथ कुछ और विवाद होना चाहिए।

— एमिल बर्जरॉन