প্রতিক্রিয়ায় অন্য রিটার্নের স্টেটমেন্টে কীভাবে একাধিক লাইন জেএসএক্স ফেরত দেবে?

Question 1

একক লাইন ঠিক কাজ করে

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

একাধিক লাইনের জন্য নয়

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

ধন্যবাদ

Question 2

ট্যাগগুলি ফাংশন কল হিসাবে মনে করার চেষ্টা করুন ( দস্তাবেজগুলি দেখুন )। তারপরে প্রথমটি হয়ে যায়:

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

এবং দ্বিতীয়টি:

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

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

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

জেএসএক্স চিনির সাথে:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

আপনাকে ফলস্বরূপ অ্যারে সমতল করার দরকার নেই, প্রতিক্রিয়া আপনার জন্য এটি করবে। নিম্নলিখিত নীচটি দেখুন http://jsfiddle.net/mEB2V/1/ । আবার: দুটি উপাদানকে একটি ডিভি / অংশে মোড়ানো সম্ভবত আরও দীর্ঘমেয়াদী হতে পারে।

Question 3

মনে হয় অ্যারে ফিরিয়ে দেওয়ার বিষয়ে পুরানো উত্তর আর প্রযোজ্য নয় (সম্ভবত প্রতিক্রিয়া ~ 0.9 থেকে, @ ডগম্যাটিক 69৯ একটি মন্তব্যে লিখেছেন )।

দস্তাবেজগুলি আপনাকে একটি একক নোড ফিরিয়ে আনার প্রয়োজন বলেছে:

জেএসএক্স রুট নোডের সর্বাধিক সংখ্যা

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

ভুলে যাবেন না যে জেএসএক্স নিয়মিত জেএসে সংকলন করে; দুটি ফাংশন ফিরিয়ে দেওয়া আসলে সিনট্যাকটিক অর্থে আসে না। তেমনি, একাধিক বাচ্চাকে একটি তারেরিতে রাখবেন না।

অনেক ক্ষেত্রে আপনি কেবল একটি <div>বা এগুলিতে জিনিসগুলি মোড়ানো করতে পারেন <span>।

আমার ক্ষেত্রে, আমি একাধিক <tr>এস ফিরে আসতে চেয়েছিলাম । আমি এগুলিকে একটিতে মুড়িয়েছি <tbody>- একটি টেবিলের একাধিক মৃতদেহ থাকার অনুমতি রয়েছে।

সম্পাদনা: ১act.০ এর প্রতিক্রিয়া অনুসারে, অ্যারের ফিরিয়ে দেওয়া স্পষ্টতই আবার অনুমোদিত, যতক্ষণ না প্রতিটি উপাদান থাকে key: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html # নতুন-রেন্ডার-রিটার্ন-টাইপ-টুকরোগুলি এবং স্ট্রিং

সম্পাদনা: প্রতিক্রিয়া 16.2 আপনাকে একটি অ্যারের থেকে পছন্দ করে এমন উপাদানগুলির তালিকা <Fragment>…</Fragment>বা তার সাথে ঘিরে ফেলতে দেয় <>…</>: https://blog.jmes.tech/react-fragment-and-semented-html/

Question 4

থেকে v16.0.0 প্রতিক্রিয়া অগ্রে, এটি একটি মধ্যে সেগুলির মোড়কে রিটার্ন একাধিক উপাদানের করা সম্ভবArray

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

প্রতিক্রিয়া v16.2.0 থেকে এছাড়াও একটি নতুন বৈশিষ্ট্য React Fragmentsপ্রবর্তন করা হয়েছে যা আপনি একাধিক উপাদান মোড়ানোর জন্য ব্যবহার করতে পারেন

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

ডকুমেন্টেশন অনুসারে:

প্রতিক্রিয়ায় একটি সাধারণ প্যাটার্ন হ'ল কোনও উপাদানকে একাধিক উপাদান ফেরত দেওয়া। খণ্ডগুলি আপনাকে ডিওমে অতিরিক্ত নোড যোগ না করে বাচ্চাদের একটি তালিকা তৈরি করতে দেয়।

সুস্পষ্ট বাক্য গঠন দিয়ে ঘোষিত খণ্ডগুলিতে কী থাকতে পারে। এর জন্য একটি ব্যবহারের ক্ষেত্রটি একটি সংকলনকে টুকরো টুকরো করে ম্যাপিং করছে - উদাহরণস্বরূপ, বিবরণী তালিকা তৈরি করতে:
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
কীটি হ'ল একমাত্র বৈশিষ্ট্য যা খণ্ডে প্রেরণ করা যায়। ভবিষ্যতে আমরা অতিরিক্ত বৈশিষ্ট্যগুলির জন্য সমর্থন যোগ করতে পারি, যেমন ইভেন্ট হ্যান্ডলারের মতো।

Question 5

এছাড়াও, আপনি একটি প্রতিক্রিয়া উপাদানটির মধ্যে কিছু সহায়ক ফাংশনে কয়েকটি তালিকা আইটেম ফিরে আসতে চাইতে পারেন। keyগুণের সাথে এইচটিএমএল নোডের একটি অ্যারে ফিরিয়ে দিন :

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

Question 6

আপনি createFragmentএখানে ব্যবহার করতে পারেন ।

https://facebook.github.io/react/docs/create-fraament.html

import createFragment from 'react-addons-create-fragment';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

(এখানে ES6 এবং জেএসএক্স সিনট্যাক্স ব্যবহার করে)

আপনাকে প্রথমে react-addons-create-fragmentপ্যাকেজ যুক্ত করতে হবে :

npm install --save react-addons-create-fragment

জান ওলাফ ক্রেমসের সমাধান সম্পর্কে সুবিধা: প্রতিক্রিয়া নিখোঁজ হওয়ার বিষয়ে অভিযোগ করে না key

Question 7

আপডেট হয়েছে

প্রতিক্রিয়া প্রতিক্রিয়া ব্যবহার করুন। ইহা সহজ. খণ্ড ডকুমেন্টেশনের লিঙ্ক ।

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

পুরানো উত্তর - অপ্রচলিত

প্রতিক্রিয়া> 16 দিয়ে আপনি প্রতিক্রিয়া-সংমিশ্রণ ব্যবহার করতে পারেন ।

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

অবশ্যই, রিঅ্যাক্ট-কম্পোজিট ইনস্টল করতে হবে।

npm install react-composite --save

Question 8

এটি প্রতিক্রিয়া প্রতিক্রিয়া দ্বারা সহজ <></>এবং React.Fragment:

return (
    <>
      {[1, 2, 3].map(
        (n, index): ReactElement => (
          <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
          </React.Fragment>
        ),
      )}
    </>
  );