কীভাবে বাড়তি মোড়ক এড়ানো যাবে?

113

আজ আমি রিঅ্যাকটিজেএস শিখতে শুরু করেছি এবং এক ঘন্টা পরে সমস্যার মুখোমুখি হয়েছি .. আমি একটি উপাদান সন্নিবেশ করতে চাই যা পৃষ্ঠায় একটি ডিভের ভিতরে দুটি সারি রয়েছে। আমি নীচে কী করছি তার একটি সরল উদাহরণ।

আমার এইচটিএমএল রয়েছে:

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

যে সমস্যাটি আমি খুব খুশি নই যে প্রতিক্রিয়া আমাকে সমস্ত ডিভিড "ডেডসিম্পল কম্পোনেন্ট" এ গুটিয়ে রাখতে বাধ্য করে। সুস্পষ্ট ডিওএম ম্যানিপুলেশন ছাড়াই এর পক্ষে সর্বোত্তম এবং সাধারণ কাজটি কী?

আপডেট 7/28/2017: প্রতিক্রিয়া রক্ষণাবেক্ষণকারীরা প্রতিক্রিয়া 16 বিটা 1 এ সেই সম্ভাবনাটি জুড়েছে

যেহেতু 16.2 প্রতিক্রিয়া , আপনি এটা করতে পারেন:

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

javascript reactjs

— কিরিল রেজনিকভ
সূত্র

4

নিখুঁত নামকরণ অনুশীলন ;-)

— কিরিল রেজনিকভ

আমি কি আপনার এইচটিএমএল ফাইলটি দেখতে পাচ্ছি? আমি আপনার প্রশ্নটি ভুলভাবে পড়েছি। যদিও আমি একটি workaround থাকতে পারে।

— লুইস 93

স্মিথ এরকম: jsfiddle.net/qawumm3v

— কিরিল

একটি উপাদান একটি উপাদান থাকাতে আপনার সমস্যা আছে? সত্যি?

— ডোমিনিক

আপনি কি বোঝাতে চেয়েছেন? আমি কেবল প্রতিক্রিয়ার চেষ্টা করছি, এটি খুব জটিল হওয়া উচিত নয় .. তবে সীমাবদ্ধতা বিরক্তিকর দেখাচ্ছে looks

— কিরিল রেজনিকভ

142

এই প্রয়োজনীয়তাটি প্রতিক্রিয়া সংস্করণে (16.0)] 1 এ সরানো হয়েছে , সুতরাং এখন আপনি সেই মোড়ক এড়াতে সক্ষম হন।

আপনি প্যারেন্ট নোড তৈরি না করে উপাদানগুলির একটি তালিকা রেন্ডার করতে React.Fraਮੈਂਟ ব্যবহার করতে পারেন, সরকারী উদাহরণ:

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

আরও এখানে: টুকরা

— Luger
সূত্র

1

দারুণ খবর দিমিত্রিউলিয়ানেটস। কোনও পরিকল্পিত মুক্তির তারিখ আছে?

— জোনাস কার্লবাউম

এটি 26 শে সেপ্টেম্বর, 2017 থেকে প্রকাশিত হয়েছে, রিঅ্যাক্টজ.স.আর.

— টম

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 প্রবর্তন পদ্ধতিতে একটি ডিভ মধ্যে মোড়ানো ছাড়াই রেন্ডার পদ্ধতিতে উপাদানগুলির একটি অ্যারের ফিরিয়ে দেওয়া প্রবর্তন করেছিল: 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>,
  ];
}

এই মুহুর্তে, কী সতর্কতা এড়াতে প্রতিটি উপাদানটির জন্য একটি কী প্রয়োজন তবে ভবিষ্যতে প্রকাশে এটি পরিবর্তন করা যেতে পারে:

ভবিষ্যতে, আমরা সম্ভবত জেএসএক্সে একটি বিশেষ টুকরা সিনট্যাক্স যুক্ত করব যার কীগুলির দরকার নেই।

— টম
সূত্র

<> </> এর নতুন শর্টহ্যান্ড সিনট্যাক্স দুর্দান্ত। আমি এখনও এটি সম্পর্কে অনেক মিশ্র অনুভূতি আছে।

— থুলানী চিভান্দিকওয়া

@ থুলানী চিভান্দিকওয়া শর্টহ্যান্ড সিনট্যাক্স সম্পর্কে আপনার ভ্রান্ত ধারণাটি শুনতে কি আপত্তি করবেন?

— টম

1

আমি মনে করি এটি খালি ট্যাগ জেএসএক্স-তে বিজোড় হওয়ার ধারণা সম্পর্কে আরও বেশি এবং খুব স্বজ্ঞাত নয় যতক্ষণ না আপনি সঠিকভাবে জানেন যে এটি কী করে।

— থুলানী চিভান্দিকওয়া

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

আমি ডিআইভি ছাড়াই সন্তানের উপাদানগুলিকে মোড়ানোর জন্য একটি উপাদান তৈরি করেছি। একে ছায়া মোড়ক বলা হয়: https://www.npmjs.com/package/react-shadow-wrapper

— ম্যাট ল্যান্ডার্স
সূত্র

আমি আপনার প্যাকেজে একটি সমস্যা পোস্ট করেছি, আপনি কি দয়া করে একবার দেখতে পারেন? ধন্যবাদ

— আন্তনি 4

1

এখনও প্রয়োজন বোধ করা হয় , কিন্তু এখন প্রতিক্রিয়া একটি অতিরিক্ত 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 এই নতুন API ডক

React.createElement : প্রদত্ত ধরণের একটি নতুন প্রতিক্রিয়া উপাদান তৈরি করুন এবং ফিরে দিন। প্রকারের যুক্তিটি হয় ট্যাগের নাম স্ট্রিং (যেমন 'ডিভ' বা 'স্প্যান'), একটি প্রতিক্রিয়া উপাদান উপাদান (একটি শ্রেণি বা কোনও ক্রিয়া), অথবা প্রতিক্রিয়াযুক্ত খণ্ডের ধরণ হতে পারে ।

এখানে সরকারী উদাহরণ, প্রতিক্রিয়া দেখুন ।

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

— প্রধান
সূত্র

0

আপনি এই divউপাদানটি থেকে মুক্তি পেতে সক্ষম হবেন না । React.reender () এর জন্য একটি বৈধ DOM নোড ফেরত আসা দরকার।

— হেনরিক অ্যান্ডারসন
সূত্র

ডিভগুলি উপেক্ষা করা হয়, নকআউট.জেএস একই কাজ করে। আপনার উপাদানগুলির বাইরের অংশে কোনও স্টাইলিং না নিয়ে একটি ডিভ থাকার ফলে কিছুই প্রভাবিত হয় না।

— ক্রিস হকস

16

@ ক্রিসহোকস, একমত নন একটি র্যাপার ডিভিএস সিএসএস নির্বাচককে প্রভাবিত করে।

— ডাউনহিলসকি

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

— জোনাস কার্লবাম

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

কর্মক্ষেত্রও আছে। নীচের ব্লক কোডটি রিঅ্যাক্ট.ফ্রেগমেন্টের প্রয়োজন ছাড়াই খণ্ড তৈরি করে।

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

আমি জানি যে এই প্রশ্নের উত্তর দেওয়া হয়েছে, আপনি অবশ্যই ব্যবহার করতে পারেন রিঅ্যাক্ট.ফ্রেগমেন্ট যা কোনও নোড তৈরি করে না তবে আসুন আপনি একটি ডিভের মতো স্টাফ গ্রুপ করুন।

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

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

এটি অবশ্যই এমন কিছু নয় যা আপনি অনুশীলনে করবেন তবে এটি একটি ভাল শেখার সুযোগ।

— গ্যাব্রিয়েল পি।
সূত্র