পার্স ত্রুটি: সংলগ্ন জেএসএক্স উপাদানগুলি অবশ্যই একটি ঘেরের ট্যাগে আবৃত করা উচিত

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: সংলগ্ন জেএসএক্স উপাদানগুলি অবশ্যই একটি ঘেরের ট্যাগে মোড়ানো উচিত

এখানে সমস্যা কি? এবং এই কাজটি করতে আমি কী ব্যবহার করতে পারি?

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 সারি মুদ্রণ করছি What আমি <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 এবং নিজস্ব-ওয়ার্ডগুলিতে সর্বশেষ পরিবর্তনগুলি:

যদি আপনি চারপাশে মোড়ানোর জন্য অতিরিক্ত ডিভ যোগ করতে না চান এবং একাধিক সন্তানের উপাদানগুলি আপনি ফিরে যেতে চান তবে আপনি যেতে পারেন React.Fragments।

React.Fragments কিছুটা দ্রুত গতিযুক্ত এবং কম মেমোরির ব্যবহার রয়েছে (অতিরিক্ত ডোম নোড তৈরি করার দরকার নেই, কম বিশৃঙ্খলাযুক্ত ডিওএম ট্রি)।

উদাঃ (১.2.২.০ প্রতিক্রিয়াতে)

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

এটি "যদি" দিয়ে সমস্যাটির সমাধান করে না; যদি আমি রেন্ডার ফাংশনের মধ্যে "যদি" অপসারণ করি তবে এটি ভাল কাজ করে।

— ব্যবহারকারী 1072337

নোট করুন যে কোনও পুনর্মিলিত উপাদানের অভ্যন্তরে স্ট্যাটিস্টস ব্যবহার করতে পারবেন না। আমার আপডেট হওয়া উত্তরটি দেখুন

— মাতান গুবকিন

Answer 4

অন্যান্য উত্তরগুলির পরামর্শ অনুসারে আপনি যদি এটি অন্য ডিভের মধ্যে মোড়াতে না চান তবে আপনি এটিকে একটি অ্যারেতেও মোড়াতে পারেন এবং এটি কার্যকর হবে।

// 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

আমি এটি চেষ্টা করেছিলাম এবং এটি আমাকে একটি ত্রুটি দেয়। একটি বৈধ প্রতিক্রিয়া উপাদান (বা নাল) অবশ্যই ফিরতে হবে। আপনি অপরিশোধিত, একটি অ্যারে বা অন্য কোনও অবৈধ অবজেক্ট ফিরে আসতে পারেন।

— প্রসাদএমএস

@ প্রসাদমসভিস +1 আক্রমণকারী। জেসস: 39 অচেনা আক্রমণকারী লঙ্ঘন: কমিটফিল্টার.রেেন্ডার (): একটি বৈধ রিঅ্যাক্ট কম্পোনেন্ট অবশ্যই ফিরতে হবে। আপনি অপরিশোধিত, একটি অ্যারে বা অন্য কোনও অবৈধ অবজেক্ট ফিরে আসতে পারেন।

— স্বেতলানা ইভানোয়া

আপনার প্রয়োজন / মোড়কের উপাদান এড়াতে চান এমন সময়গুলির জন্য এটি একটি দুর্দান্ত সমাধান!

— bloudermilk

@aaaaa বর্তমান প্রতিক্রিয়াশীল পুনর্মিলনী কাজ করার কারণেই এটি সম্ভব নয়। এটি একটি স্ট্যাক এবং পুনর্মিলন পুনরুদ্ধার করা হয়। প্রতিক্রিয়া 16 এ এটি স্থির করা হয়েছে, এবং আপনি এখন একটি অ্যারে ফিরে আসতে পারেন।

— নটনাই

github.com/iamdustan/tiny-react-renderer একটি দুর্দান্ত সংগ্রহশালা যা প্রতিটি প্রতিক্রিয়া বিকাশকারীকে পড়া উচিত। একবার আপনি এটি করার পরে, এটি তাত্ক্ষণিকভাবে আপনার কাছে স্পষ্ট হওয়া উচিত যে প্রতিক্রিয়াটির বর্তমান বাস্তবায়ন কেন একাধিক শিশুকে ফিরিয়ে আনতে দেয় না।

— নটনাই

Answer 5

সমস্যাটি

পার্স ত্রুটি: সংলগ্ন জেএসএক্স উপাদানগুলি অবশ্যই একটি ঘেরের ট্যাগে আবৃত করা উচিত

এর অর্থ হ'ল আপনি একাধিক ভাইবোন জেএসএক্স উপাদানগুলি ভুল উপায়ে ফেরানোর চেষ্টা করছেন। মনে রাখবেন আপনি HTML লিখছেন না, তবে জেএসএক্স! আপনার কোডটি জেএসএক্স থেকে জাভাস্ক্রিপ্টে স্থানান্তরিত হয়েছে। উদাহরণ স্বরূপ:

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>-element। যখন তারা এর অংশ 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>
    );
  }

  মনে রাখবেন যে প্রথম স্নিপেটের জন্য বাবেল 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")];

  নোট করুন যে উপরেরটি একটি অ্যারে প্রদান করে। অ্যারেগুলি প্রতিক্রিয়া সংস্করণ 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>

— :,

@ সিনস্যাক্সের জন্য সমর্থন সমর্থন করুন আপনার বিল্ডিংয়ের পরিবেশের ক্ষেত্রে পরিবর্তিত হয়। নিশ্চিত নয় যে বাবেল এটি এখনও সমর্থন করে এবং যদি তাই হয় তবে কোন সংস্করণ।

— ক্রিস

Answer 6

প্রতিক্রিয়া 16.0.0 আমরা অ্যারে হিসাবে রেন্ডার থেকে একাধিক উপাদান ফিরে আসতে পারি।

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

প্রতিক্রিয়া 16.4.0 আমরা একটি টুকরা ট্যাগ রেন্ডার থেকে একাধিক উপাদান ফিরে আসতে পারেন। টুকরা

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

ভবিষ্যতের প্রতিক্রিয়া আপনি এই শর্টহ্যান্ড সিনট্যাক্সটি ব্যবহার করতে সক্ষম হবেন। (অনেক সরঞ্জাম এটিকে এখনও সমর্থন করে না তাই আপনি <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

এটি খুব সহজ আমরা সমস্ত উপাদান মোড়ানোর জন্য একটি প্যারেন্ট উপাদান ডিভ ব্যবহার করতে পারি বা আমরা উচ্চতর আদেশের উপাদান (এইচওসি) ধারণাটি ব্যবহার করতে পারি যেমন জেএস অ্যাপ্লিকেশনগুলির জন্য খুব দরকারী

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

বা অন্য একটি সেরা উপায় হ'ল এটি খুব সহজ নয় খুব জটিল আপনার প্রকল্পে একটি ফাইল hoc.js যুক্ত করুন এবং কেবল এই কোডগুলি যুক্ত করুন

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

এখন আপনি যেখানে hoc.js ফাইলটি ব্যবহার করতে চান তা আমদানি করুন, এখন ডিভ এলিমেন্টের সাথে মোড়কের পরিবর্তে আমরা এইচকের সাথে মোড়ানো করতে পারি।

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

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

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে। এটি পড়ুন ।

— শান্তেশ্বর ইন্দে

এটি কোনও হউক নয়, এটি একটি সাধারণ উপাদান যা উপাদানটির কার্যকারিতা ডুপ্লিকেট করে Fragment।

— এমিল বার্গারন

Answer 9

প্রতিক্রিয়াটির একটি নিয়ম আছে যে জেএসএক্স এক্সপ্রেশনটির অবশ্যই একটি বহিরাগত উপাদান থাকতে হবে।

ভুল

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

ঠিক

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

Answer 10

প্রতিক্রিয়া 16 আপনার রিটার্নটিকে অ্যারের হিসাবে পায় তাই এটি ডিভের মতো একটি উপাদান দ্বারা মোড়ানো উচিত।

ভুল পন্থা

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

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

    );
}

রাইট অ্যাপ্রোচ (এক ডিভের সমস্ত উপাদান বা আপনি ব্যবহার করছেন এমন অন্যান্য উপাদান)

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

আপনি দেশীয় প্রতিক্রিয়া ব্যবহার করছেন, কারণ।

— নিক H247

এবং টুকরাগুলি প্রতিক্রিয়া নেটিভেও পাওয়া যায়, সুতরাং 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

রেক্ট-নেটিভ বিকাশকারীদের জন্য। ফ্ল্যাটলিস্টে আইটেমটি রেন্ডার করার সময় আমি এই ত্রুটির মুখোমুখি হয়েছি। আমার দুটি টেক্সট উপাদান ছিল। আমি তাদের নীচের মত ব্যবহার করছিলাম

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

এটা সত্যি না. এটি কোডসডবক্স প্রতিক্রিয়া টেম্পলেটে এমনকি ডিফল্ট। এই শ্রেণীর নামের সাথে অন্য কিছু অবশ্যই বিরোধিত হয়েছে।

— এমিল বার্গারন