প্রতিক্রিয়া জেএসএক্সের ভিতরে লুপ

Question

আমি প্রতিক্রিয়াতে নিম্নলিখিত JSXবিষয়গুলির মতো কিছু করার চেষ্টা করছি (যেখানে অবজেক্টরো পৃথক উপাদান):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

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

Comments

জেএসএক্স-এ আপনার জাভাস্ক্রিপ্ট সিনট্যাক্সের চারপাশে need} ট্যাগের দরকার আছে তা লক্ষ করা গুরুত্বপূর্ণ। এটি ফেসবুক . github.io/react/docs/… সহায়তা করতে পারে ।

— যিশাইয় গ্রে

let todos = this.props.todos.map((todo) => {return <h1>{todo.title}</h1>})

— ওভারকোডার

সম্পর্কিত: আমি কীভাবে পুনরাবৃত্তি করতে পারি উপাদানগুলির প্রতিক্রিয়া?

— vsync

@ ওভারকোডার আপনি কেন পুরো রিটার্নটি {} ট্যাগে রাখবেন এটি => রিটার্ন <h1> {todo.title} </h1> তাই না?

— প্রবীণ পাউডেল

@ প্রভিনভিনেদেল আসলে উত্তরটি পুরান, আরও বেশি পছন্দ let todos = this.props.todos.map(t => <h1>{t.title}</h1>):)

— ওভারকোডার

Answer 1

এটিকে ভাবুন যেমন আপনি কেবল জাভাস্ক্রিপ্ট ফাংশন কল করছেন। আপনি কোনও forলুপ ব্যবহার করতে পারবেন না যেখানে কোনও ফাংশন কলের আর্গুমেন্টগুলি যেতে পারে:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

দেখুন কীভাবে ফাংশনটি আর্গুমেন্ট হিসাবে লুপটি tbodyপাস হচ্ছে forএবং অবশ্যই এটি একটি বাক্য গঠন ত্রুটি।

তবে আপনি একটি অ্যারে তৈরি করতে পারেন এবং তারপরে এটি একটি আর্গুমেন্ট হিসাবে পাস করতে পারেন:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

---

আপনি জেএসএক্সের সাথে কাজ করার সময় মূলত একই কাঠামোটি ব্যবহার করতে পারেন:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

ঘটনাচক্রে, আমার জাভাস্ক্রিপ্ট উদাহরণটি ঠিক জেএসএক্সের সেই উদাহরণে রূপান্তরিত করে। জেএসএক্স কীভাবে কাজ করে তার অনুভূতি পেতে বাবেল আরপিএল এর সাথে ঘুরে দেখুন ।

Comments

সংকলকটি সম্ভবত পরিবর্তিত হয়েছে, যেমন এই উদাহরণটি জেএসএক্স সংকলকটিতে সংকলিত বলে মনে হচ্ছে না , তবে নীচে ফেকরাইনব্রিজ্যান্ডের উত্তর হিসাবে মানচিত্রটি ব্যবহার করা সঠিকভাবে সংকলিত বলে মনে হচ্ছে।

— আরভি

আমি প্রতিশ্রুতি দিতে পারি যে সর্বশেষ উদাহরণটি এখনও সর্বশেষতম জেএসএক্স সংকলকটিতে সঠিকভাবে সংকলন করেছে।

— সোফি আল্পার্ট

এটি ভাল কাজ করে। ফেকরেনব্রিগ্যান্ডের উত্তরটি সহজ অ্যারে পুনরাবৃত্তির জন্য কাজ করে তবে আপনি যে পরিস্থিতিতে ব্যবহার করতে পারবেন না সে পরিস্থিতিতে এই উত্তরটি অবশ্যই আবশ্যক map(যেমন আপনার কোনও ভেরিয়েবলের কোনও সংগ্রহ নেই) stored

— কেলভিন

প্রতিক্রিয়াটি দক্ষতার সাথে ডোম আপডেট করতে হবে, এই ক্ষেত্রে, পিতামাতার keyপ্রতিটি সন্তানের জন্য একটি বরাদ্দ করা উচিত । রেফ: ফেসবুক.

— github.io/react/docs/…

এটি উদাহরণস্বরূপ কাজ করবে তবে এটি keyসম্পত্তি হিসাবে কিছু গুরুত্বপূর্ণ বিট এবং একটি কোড শৈলীর হাতছাড়া করে যা বাস্তবে কোড-বেসগুলিতে ব্যবহৃত হয় না। দয়া করে এই উত্তরটি stackoverflow.com/questions/22876978/loop-inside-react-jsx/… সঠিক হিসাবে বিবেচনা করুন ।

— Okonetchnikov

Answer 2

এটি আপনার পরিস্থিতির জন্য কাজ করে কিনা তা নিশ্চিত নন, তবে প্রায়শই মানচিত্র একটি ভাল উত্তর।

লুপের জন্য যদি এটি ছিল আপনার কোড:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

আপনি মানচিত্র সহ এটি লিখতে পারেন :

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6 সিনট্যাক্স:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

Comments

যদি পুনরুক্তিটি একটি অ্যারে হয় তবে মানচিত্রটি আরও অর্থবোধ করে; লুপের জন্য একটি উপযুক্ত যদি এটি একটি সংখ্যা হয়।

— কোড হুইস্পেরার

<tbody>{objects.map((o, i) => <ObjectRow obj={o} key={i}/>}</tbody>Reactify এর ES6 সমর্থন বা ব্যাবেল ব্যবহার করে।

— বিকৃত

+1 টি। এমনকি আমি এটি একটি উল (নিবন্ধবিহীন তালিকা) দিয়েও ব্যবহার করছি। <ul> {objects.map((object:string,i:number)=>{ return <li>{object}</li> })} </ul>টাইপস্ক্রিপ্ট ব্যবহার করে

— রবার্তো সি নাভারো

এটি দুর্দান্ত, তবে আপনি কোনও বস্তুর উপরে মানচিত্র তৈরি করতে পারবেন না ... এর জন্য আমি ব্যবহার করবfor..in

— ড্যামন

মনে রাখবেন যে অবজেক্ট.কিগুলি ব্যবহার করার সময় কীগুলির ক্রমটি স্বেচ্ছাচারিত হয়। আমি দেখতে পেয়েছি যে কীগুলির ক্রম পৃথকভাবে সংরক্ষণ করা ভালভাবে কাজ করে এবং প্রয়োজনে বস্তুটির উপরও অর্ডার অর্ডার করে। এটি আমাকে কোড লিখতে দেয়this.props.order.map((k)=><ObjectRow key={k} {...this.props.items[k]} />)

— tgrrr

Answer 3

আপনার কাছে যদি ইতিমধ্যে map()@ ফেকরেইনব্রিগান্ডের উত্তরটি পছন্দ করতে কোনও অ্যারে না থাকে এবং এটি ইনলাইন করতে চান তবে উত্স লেআউটটি @ সোফিএলপার্টের উত্তরের চেয়ে বেশি ফলাফলের সাথে মিলে যায়:

ES2015 (ES6) সিনট্যাক্স সহ (স্প্রেড এবং তীর ফাংশন)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

পুনরায়: বাবেলের সাথে প্রতিস্থাপনকারী, এর সতর্কতামূলক পৃষ্ঠাটি বলছে যে Array.fromএটি ছড়িয়ে দেওয়ার জন্য প্রয়োজনীয়, তবে বর্তমানে ( v5.8.23) সত্যিকারের ছড়িয়ে দেওয়ার সময় এমনটি মনে হয় না Array। এটি পরিষ্কার করার জন্য আমার কাছে একটি ডকুমেন্টেশন ইস্যু খোলা আছে। তবে আপনার নিজের ঝুঁকিতে বা পলিফিল ব্যবহার করুন।

ভ্যানিলা ইএস 5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

ইনলাইন IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

অন্যান্য উত্তর থেকে কৌশলগুলির সংমিশ্রণ

উত্সের সাথে সংশ্লিষ্ট উত্সের বিন্যাসটি রাখুন, তবে অন্তর্ভুক্ত অংশটি আরও কমপ্যাক্ট করুন:

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

ES2015 সিনট্যাক্স এবং Arrayপদ্ধতি সহ

সঙ্গে Array.prototype.fillআপনি বিস্তার ব্যবহার করে একটি বিকল্প হিসাবে এই কাজ করতে পারে উপরে সচিত্র হিসাবে:

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(আমি মনে করি আপনি আসলে কোনও যুক্তি বাদ দিতে পারেন fill(), তবে আমি তাতে 100% নই।) সমাধানটির পূর্ববর্তী সংস্করণে আমার ভুল সংশোধন করার জন্য @ ফেকরাইনব্রিজন্ডকে ধন্যবাদ fill()(সংশোধনী দেখুন)।

key

সব ক্ষেত্রেই keyঅ্যাটর্নিয়ার বিকাশের সাথে একটি সতর্কতা হ্রাস করে, তবে সন্তানের মধ্যে অ্যাক্সেসযোগ্য নয়। আপনি যদি সন্তানের মধ্যে সূচকটি উপলব্ধ করতে চান তবে আপনি অতিরিক্ত অ্যাটর্কে পাস করতে পারেন। আলোচনার জন্য তালিকা এবং কীগুলি দেখুন ।

Comments

কি হবে yield? যখন আমাদের জেনারেটর থাকে তখন একটি মধ্যবর্তী অ্যারেতে উপাদানগুলিকে ধাক্কা দেওয়া এক রকম কুশ্রী। তারা কি কাজ করে?

— এমপেন

@ মার্ক আমি জানি না যে জেনারেটরগুলি এখানে সত্যিই প্রযোজ্য। জেএসএক্সের প্রসঙ্গে এটির জন্য মূল বিষয়টি হল একটি অভিব্যক্তি যা অ্যারে প্রদান করে। সুতরাং আপনি যদি কোনও জেনারেটর ব্যবহার করতে যাচ্ছেন তবে আপনি সম্ভবত এটি যেভাবেই ছড়িয়ে দিয়েছেন এবং এটি সম্ভবত ES2015- ভিত্তিক সমাধানগুলির চেয়ে আরও ভার্জোজ হবে।

— JMM

কেমন আছে এই আরো ভার্বোস? এবং কেন জেএসএক্স কেবল অ্যারে নয়, কোনও পুনরাবৃত্তিযোগ্য গ্রহণ করবে না?

— এমপেন

@ মার্ক যেটি আমি ব্যবহার করেছেন (ES5) IIFE উদাহরণের তুলনায় প্রকৃতপক্ষে কম ভার্বোজ , তবে এটি [...Array(x)].map(() => <El />))সংস্করণটির চেয়ে যথেষ্ট বেশি ভার্বোজ , যা আমি মনে করি এটি সবচেয়ে মার্জিত এবং কেন আমি এটি বৈশিষ্ট্যযুক্ত করেছি। উত্তর: দ্বিতীয় প্রশ্ন, এটি একটি দুর্দান্ত বিষয়। জেএসএক্স সম্পর্কে এটিকে অন্তর্ভুক্ত করে এমন কিছু নেই বলে মনে হয় না, তাই এটি নির্ভর করে যে রূপান্তরিত জেএসএক্সের আর কোনও গ্রাহক বাচ্চাদের যুক্তি দিয়ে কী করেন যা উত্সের দিকে না তাকিয়ে বলতে পারি না। তুমি কি জানো? এটি একটি উদ্বেগজনক প্রশ্ন।

— JML

@ করিসিম্মনস শীতল, তথ্যের জন্য ধন্যবাদ fill()। আমি মনে করি এখন যে কারণে আমি দ্বিধা বোধ করেছি তা হ'ল একটি প্রশ্ন যা প্যারামিটারগুলির বিকল্পতা কীভাবে ইএস স্পেসে ইঙ্গিত করা হয় (সেই কোনও সময়ের দিকে নজর দিতে হবে)। কমা হ'ল একটি অ্যারে উপাদানকে এলিডি করার এক উপায় - এই ক্ষেত্রে প্রথমটি। আপনি এটি করতে পারেন যদি আপনি সূচীগুলি অ্যারের দৈর্ঘ্য -১ এর পরিবর্তে যে অ্যারেটির দৈর্ঘ্য -১ ছড়াচ্ছেন তার থেকে ১. দৈর্ঘ্যের চেয়ে বেশি হতে চান (কারণ প্রচ্ছন্ন উপাদানগুলি কেবল অ্যারে এবং ডনের দৈর্ঘ্যে অবদান রাখে ' টি সম্পর্কিত একটি সম্পত্তি আছে)।

— জেএমএম

Answer 4

ES6 সিনট্যাক্স সহ কেবল মানচিত্র অ্যারে পদ্ধতিটি ব্যবহার করুন :

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

keyসম্পত্তি ভুলবেন না ।

Comments

আমি আইডির পরিবর্তে একটি এলোমেলো 'ম্যাথ.র্যান্ডম ()' কী যুক্ত করি যখন এটি শিশুদের ভিতরে সেটস্টেটের সময় ঠিকঠাক কাজ করে না, কোনও ধারণা কেন?

— অলিভার ডি

Answer 5

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

এছাড়াও, প্রয়োজন অনুসারে প্রতিটি পুনরাবৃত্তির জন্য একটি অনন্য কী থাকা ভুলবেন না । মানচিত্র ফাংশনটি 0 থেকে একটি অনন্য সূচক তৈরি করে তবে উত্পাদিত সূচকটি ব্যবহার করার পরামর্শ দেওয়া হয় না তবে যদি আপনার মানটি অনন্য বা কোনও অনন্য কী থাকে তবে আপনি সেগুলি ব্যবহার করতে পারেন:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

এছাড়াও, এমডিএন থেকে কয়েকটি লাইন যদি আপনি অ্যারেতে মানচিত্রের ফাংশনটির সাথে পরিচিত না হন:

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

কলব্যাকটি তিনটি আর্গুমেন্টের সাথে আহ্বান করা হয়েছে: উপাদানটির মান, উপাদানটির সূচক এবং অ্যারে অবজেক্টকে বিভ্রান্ত করা।

যদি এইআর্গ প্যারামিটারটি মানচিত্রে সরবরাহ করা হয় তবে এটি কলব্যাকের এই মান হিসাবে ব্যবহৃত হবে। অন্যথায়, অপরিবর্তিত মানটি এই মান হিসাবে এটি ব্যবহৃত হবে। কলব্যাকের মাধ্যমে চূড়ান্তভাবে পর্যবেক্ষণযোগ্য এই মানটি কোনও ফাংশন দ্বারা দেখা এটিকে নির্ধারণের জন্য নিয়মাবলী অনুসারে নির্ধারিত হয়।

মানচিত্রটি অ্যারেটিকে পরিবর্তিত করে না যেখানে এটি বলা হয় (যদিও কলব্যাক, যদি আহ্বান করা হয় তবে এটি করতে পারে)।

Comments

Array#mapঅ্যাসিঙ্ক না!

— ফিলরাজ

Answer 6

আপনি যদি ইতিমধ্যে লোডাশ ব্যবহার করছেন তবে _.timesফাংশনটি কার্যকর।

import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <ol>
                    {_.times(3, i =>
                        <li key={i}>
                            <Select onSelect={this.onSelect}>
                                <option value="1">bacon</option>
                                <option value="2">cheez</option>
                            </Select>
                        </li>
                    )}
                </ol>
            </div>
        );
    }
}

Comments

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

— যিশাইয় গ্রে

@ ইশায়াহগ্রি কেবলমাত্র যদি আপনি ইতিমধ্যে একটি অ্যারে পেয়ে থাকেন। কখনও কখনও আপনি কয়েক বার স্টাফ পুনরাবৃত্তি করতে চান।

— এমপেন

অবশ্যই নিশ্চিত! আসল ডেটার উপর নির্ভর করে নিশ্চিত হওয়ার জন্য লটের বিভিন্ন পদ্ধতির। আমি দেখতে পেয়েছি যে প্রায়শই আমাদের বিকাশ প্রক্রিয়াতে না হয়ে আমরা মডেল করা হলে ডেটা কীভাবে হয় তার কারণে আমরা মানচিত্রে ফিট করতে সক্ষম হয়েছি। লোডাশ ব্যবহার করে দুর্দান্ত উদাহরণ! বিটিডব্লিউ, আপনি কি আপনার উপাদানগুলিতে আপনার পদ্ধতিগুলি আবদ্ধ করতে সম্পত্তি প্রারম্ভকালীন বাক্য গঠন ব্যবহার করছেন?

— যিশাইয় গ্রে

@ ইসাইয়াহ গ্রেই আমার মনে হয় তাদের কেবল ES6 পদ্ধতির সংজ্ঞা

— এমপেন

Answer 7

আপনি রিটার্ন ব্লকের বাইরেও বের করতে পারবেন:

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

Answer 8

আমি জানি এটি একটি পুরানো থ্রেড, তবে আপনি প্রতিক্রিয়া টেম্পলেটগুলি চেকআউট করতে চাইতে পারেন , যা আপনাকে কয়েকটি নির্দেশনা (যেমন আরটি-রিপিট) সহ প্রতিক্রিয়াতে jsx- স্টাইলের টেম্পলেট ব্যবহার করতে দেয়।

আপনার উদাহরণ, যদি আপনি প্রতিক্রিয়া-টেম্পলেট ব্যবহার করেন তবে তা হ'ল:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

Comments

সরল জাভাস্ক্রিপ্ট সমস্যার সমাধান করতে ইতিমধ্যে বিভিন্ন ধরণের লুপ বা অ্যারে.প্রোটোটাইপ.ম্যাপ পদ্ধতির সাথে সমাধান সরবরাহ করার সময় কেন অতিরিক্ত লাইব্রেরি ব্যবহার করে? আমি নিজেই আমার বর্তমান প্রকল্পে ইতিমধ্যে দুটি সরল জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করেছি যা ভাল কাজ করে। যখনই সম্ভব সরল জাভাস্ক্রিপ্ট উপায়ে ব্যবহার করার অভ্যাস থাকায় জাভাস্ক্রিপ্টে আমার দক্ষতা উন্নত করতে সহায়তা করবে। আমি কেবলমাত্র অতিরিক্ত লাইব্রেরি ব্যবহার করি যখন নির্দিষ্ট সমস্যার সমাধান যেমন র‌্যাক্ট-রাউটারের সাথে রাউটিংয়ের পক্ষে সমাধান পাওয়া কঠিন বলে মনে হয়।

— লেক্স সফট

Answer 9

এটি করার বিভিন্ন উপায় রয়েছে ways জেএসএক্স শেষ পর্যন্ত জাভাস্ক্রিপ্টে সংকলিত হয়ে যায়, সুতরাং যতক্ষণ আপনি বৈধ জাভাস্ক্রিপ্ট লিখছেন ততক্ষণ আপনি ভাল হবেন।

আমার উত্তরটির লক্ষ্য এখানে ইতিমধ্যে উপস্থাপিত সমস্ত দুর্দান্ত উপায় একত্রিত করা:

যদি আপনার কাছে অবজেক্টের অ্যারে না থাকে তবে কেবল সারিগুলির সংখ্যা:

মধ্যে returnব্লক, একটি তৈরি Arrayএবং ব্যবহার Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

returnব্লকের বাইরে কেবল লুপের জন্য একটি সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করুন:

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

অবিলম্বে অনুরোধ ফাংশন এক্সপ্রেশন:

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

আপনার যদি অবজেক্টগুলির একটি অ্যারে থাকে

মধ্যে returnব্লক, .map()একটি থেকে প্রতিটি বস্তুর <ObjectRow>উপাদান:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

returnব্লকের বাইরে কেবল লুপের জন্য একটি সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করুন:

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

অবিলম্বে অনুরোধ ফাংশন এক্সপ্রেশন:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

Comments

দুর্দান্ত উত্তর: বিভিন্ন কৌশল, সমস্ত কেবলমাত্র সরল জাভাস্ক্রিপ্ট ব্যবহার করে যা জাভাস্ক্রিপ্টের শক্তি দেখায়, অনুরূপ কাজ করার বিভিন্ন উপায়ের জন্য ধন্যবাদ।

— লেক্স সফট

Answer 10

যদি সংখ্যাগুলি একটি অ্যারে হয় এবং এটি খুব সহজ।

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

প্রতিক্রিয়ায় অ্যারের ডেটা টাইপ খুব ভাল, অ্যারে নতুন অ্যারে ব্যাক করতে পারে, এবং ফিল্টার সমর্থন করতে পারে, হ্রাস ইত্যাদি।

Comments

এটি কোনও শালীন উত্তর নয় কারণ এটি কোনও কী ব্যবহার করে না।

— kojow7

Answer 11

mapবিবৃতি ব্যবহারের দিকে ইঙ্গিত করে বেশ কয়েকটি উত্তর রয়েছে । এখানে একটি সম্পূর্ণ উদাহরণস্বরূপ মধ্যে একটি পুনরুক্তিকারীর ব্যবহার করছে FeatureList লিস্টে উপাদান বৈশিষ্ট্য নামক একটি JSON- ডাটা স্ট্রাকচার উপর ভিত্তি করে উপাদান বৈশিষ্ট্য ।

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

আপনি গিটহাবে সম্পূর্ণ ফিচারলিস্ট কোডটি দেখতে পারেন । বৈশিষ্ট্য চোকান এখানে তালিকাভুক্ত করা ।

Comments

জেএসএন ডেটা নিয়ে কাজ করার সময়, যেমন আনা এপিআই ব্যবহার করে ডেটাবেস থেকে ডেটা পুনরুদ্ধার করার সময়, আমি অ্যারে.প্রোটোটাইপ.ম্যাপ পদ্ধতিটি ব্যবহার করে নির্ভর করি। এটি সেই উদ্দেশ্যে একটি সুবিধাজনক এবং প্রমাণিত উপায়।

— লেক্স সফট

Answer 12

বার এবং বিনিময়ে একটি সংখ্যা জন্য লুপ করতে, আপনি এটি সাহায্যে অর্জন করতে পারেন fromএবং map:

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

কোথায় i = number of times

---

আপনি যদি রেন্ডারযুক্ত উপাদানগুলিতে অনন্য কী আইডি নির্ধারণ করতে চান, আপনি প্রতিক্রিয়াযুক্ত ডকুমেন্টেশনেReact.Children.toArray প্রস্তাবিত হিসাবে ব্যবহার করতে পারেন

React.Children.toArray

বাচ্চাদের অস্বচ্ছ ডেটা স্ট্রাকচারটি প্রতিটি সন্তানের জন্য বরাদ্দ করা কীগুলির সাথে সমতল অ্যারে হিসাবে ফিরিয়ে দেয়। আপনি যদি আপনার রেন্ডার পদ্ধতিতে বাচ্চাদের সংগ্রহগুলি পরিচালনা করতে চান তবে দরকারী, বিশেষত যদি আপনি এটি পুনরায় অর্ডার করতে চান বা এটিকে পাস করার আগে এই পৃষ্ঠাগুলি স্লাইস করতে চান।

বিঃদ্রঃ:

React.Children.toArray()বাচ্চাদের তালিকা সমতলকরণের সময় নেস্টেড অ্যারেগুলির অর্থার্থ সংরক্ষণের জন্য কীগুলি পরিবর্তন করে। এটি হল, ট্যুর অ্যারে প্রতিটি কীটিকে প্রত্যাবর্তন করা অ্যারেতে উপস্থাপন করে যাতে প্রতিটি উপাদানটির কী এতে থাকা ইনপুট অ্যারেতে স্কোপ হয়।

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

Answer 13

আপনি যদি রেন্ডার পদ্ধতির অভ্যন্তরীণ রিটার্ন () এর রূপান্তর করতে চান , তবে সবচেয়ে সহজ বিকল্পটি মানচিত্র () পদ্ধতি ব্যবহার করা হবে । নীচে প্রদর্শিত ম্যাপ () ফাংশন ব্যবহার করে আপনার অ্যারেটিকে জেএসএক্স সিনট্যাক্সে ম্যাপ করুন ( ES6 সিনট্যাক্স ব্যবহৃত হয় )।

---

মূল উপাদানটির ভিতরে :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

দয়া করে keyআপনার সন্তানের উপাদানটিতে যুক্ত বৈশিষ্ট্যটি নোট করুন । যদি আপনি কোনও মূল বৈশিষ্ট্য সরবরাহ না করেন তবে আপনি আপনার কনসোলটিতে নিম্নলিখিত সতর্কতাটি দেখতে পারেন।

সতর্কতা: একটি অ্যারে বা পুনরুক্তি করা প্রতিটি শিশুর একটি অনন্য "কী" প্রপস থাকা উচিত।

দ্রষ্টব্য: লোকেদের একটি সাধারণ ভুল হ'ল indexপুনরাবৃত্তি করার সময় কী হিসাবে ব্যবহার করা indexহয়, উপাদানটিকে কী হিসাবে ব্যবহার করা একটি অ্যান্টি-প্যাটার্ন এবং আপনি এটি সম্পর্কে এখানে আরও পড়তে পারেন । সংক্ষেপে বলতে গেলে, যদি এটা না একটি স্ট্যাটিক তালিকা কখনোই ব্যবহার indexকী-এর মত।

---

এখন অবজেক্টরো উপাদানটিতে, আপনি তার বৈশিষ্ট্যগুলি থেকে বস্তুটি অ্যাক্সেস করতে পারেন।

অবজেক্টরো উপাদানটির অভ্যন্তরে

const { object } = this.props

অথবা

const object = this.props.object

এই আপনি বস্তুর আপনি পরিবর্তনশীল পেরেন্টকে উপাদান থেকে পাশ আনা উচিত objectমধ্যে ObjectRow অংশটি। এখন আপনি নিজের উদ্দেশ্য অনুসারে সেই বস্তুর মানগুলি ছড়িয়ে দিতে পারেন।

---

তথ্যসূত্র:

জাভাস্ক্রিপ্টে মানচিত্র () পদ্ধতি

ইসিএমএ স্ক্রিপ্ট 6 বা ইএস 6

Answer 14

আমাদের বলুন যে আমাদের রাজ্যে আইটেমির একটি অ্যারে রয়েছে:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>

Comments

আমি মনে করি আপনার মানচিত্র (আইটেম) পরে the of থেকে মুক্তি পাওয়ার দরকার হতে পারে যা দেখে মনে হয় এগুলি আমার জন্য কাজ করে।

— আয়ান

Answer 15

একটি ES2015 / ব্যাবেল সম্ভাবনা জেএসএক্সের একটি অ্যারে তৈরি করতে একটি জেনারেটর ফাংশন ব্যবহার করছে:

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

Answer 16

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

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

Answer 17

কেবল .map()আপনার সংগ্রহের মধ্য দিয়ে লুপ করতে এবং <ObjectRow>প্রতিটি পুনরাবৃত্তি থেকে প্রপস সহ আইটেমগুলি ফেরত দিতে ব্যবহার করুন ।

ধরে objectsনেওয়া কোথাও একটি অ্যারে ...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

Answer 18

ES2015 অ্যারে.ম্যাপ ফাংশন + কী সহ

আপনার যদি কিছুই না থাকে .map() না থাকলে উপাদানগুলির পুনরাবৃত্তি Array.from()করতে mapফাংশনটি ব্যবহার করতে পারেন :

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

Answer 19

আমি এটি ব্যবহার:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

পিএস: কীটি কখনও ভুলবেন না বা আপনার অনেক সতর্কতা থাকবে!

Comments

অথবা আপনার আইটেমগুলির কোনও .Idসম্পত্তি না থাকলে অ্যারে সূচকটি ব্যবহার করুনitems.map( (item, index) => <Foo key={index}>{item}</Foo>

— ont

Answer 20

আমি এমন পদ্ধতির পক্ষে যেতে চাই যেখানে প্রোগ্রামিং লজিকের ফেরতের মূল্যের বাইরে ঘটে render । এটি কৃপণ করা সহজভাবে যা রেন্ডার করা হয়েছে তা রাখতে সহায়তা করে।

সুতরাং আমি সম্ভবত কিছু করতে চাই:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

স্বীকারোক্তিজনকভাবে এটি কোডের এত কম পরিমাণে এটি অন্তর্ভুক্ত করা ভাল কাজ করতে পারে।

Comments

অবজেক্টগুলির মাধ্যমে পুনরাবৃত্তি করার জন্য লোডাস মানচিত্রের বড় ফ্যান। আমি import { map } from 'lodash'ঝুঁকে যাব তাই আপনার যদি প্রয়োজন না হয় তবে আপনি সমস্ত লড্যাশ ফাংশন আমদানি করছেন না।

— স্ট্রেচ0

আজকাল আমাদের লড্যাশ মানচিত্রেরও প্রয়োজন নেই - সরাসরি অ্যারে থেকে কেবল ম্যাপ করুন।

— অ্যাডাম ডোনাহু

হ্যাঁ তবে আপনি এস 6 দিয়ে কোনও বস্তুর মধ্য দিয়ে লুপ করতে পারবেন না map(), কেবল অ্যারে। আমি যা বলছিলাম এটি কোনও বস্তুর উপর লুপিংয়ের জন্য ভাল।

— স্ট্রেচ0

আমি ভেবেছিলাম আপনি আপনার objectsতালিকা হিসাবে জিনিস বোঝাতে চেয়েছিলেন , আমার ভুল।

— অ্যাডাম দোনাহু

Answer 21

অন্যান্য উত্তর দ্বারা প্রস্তাবিত হিসাবে আপনি অবশ্যই একটি। ম্যাপ দিয়ে সমাধান করতে পারেন। আপনি যদি ইতিমধ্যে ব্যাবেল ব্যবহার করেন তবে আপনি জেএসএক্স-কন্ট্রোল-স্টেটমেন্টগুলি ব্যবহার করার বিষয়ে ভাবতে পারেন তাদের কিছুটা সেটিং দরকার, তবে আমার মনে হয় এটি পাঠযোগ্যতার দিক থেকে উপযুক্ত (বিশেষত অ-প্রতিক্রিয়া বিকাশকারীদের জন্য)। আপনি যদি একটি লিন্টার ব্যবহার করেন তবে এসলিন্ট-প্লাগইন-জেএসএক্স-নিয়ন্ত্রণ-বিবৃতি রয়েছে

Answer 22

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

এটি অবৈধ, একমাত্র উপায় হ'ল ফাংশনটি ফেরানো ভেরিয়েবলগুলি সংরক্ষণ করার জন্য একটি অ্যারে ব্যবহার করা।

অথবা আপনি জাভাস্ক্রিপ্ট ES5 থেকেArray.prototype.map উপলব্ধ যা এই পরিস্থিতিটি পরিচালনা করতে ব্যবহার করতে পারেন ।

হয়তো আমরা ঠিক একটি পুনরাবৃত্ত ফাংশন বাস্তবায়ন করার জন্য একটি নতুন JSX সিনট্যাক্স পুনঃ অন্যান্য কম্পাইলার লিখতে পারেন কৌণিক এরng-repeat ।

Answer 23

এটি একাধিক উপায়ে করা যেতে পারে।

1. উপরে প্রস্তাবিত হিসাবে, returnঅ্যারের মধ্যে সমস্ত উপাদান সংরক্ষণ করুন

2. ভিতরে লুপ return

   পদ্ধতি 1

    let container =[];
       let arr = [1,2,3] //can be anything array, object 
   
       arr.forEach((val,index)=>{
         container.push(<div key={index}>
                        val
                        </div>)
           /** 
           * 1. All loop generated elements require a key 
           * 2. only one parent element can be placed in Array
           * e.g. container.push(<div key={index}>
                                       val
                                 </div>
                                 <div>
                                 this will throw error
                                 </div>  
                               )
           **/   
       });
       return (
         <div>
            <div>any things goes here</div>
            <div>{container}</div>
         </div>
       )

   পদ্ধতি 2

      return(
        <div>
        <div>any things goes here</div>
        <div>
           {(()=>{
             let container =[];
             let arr = [1,2,3] //can be anything array, object 
             arr.forEach((val,index)=>{
               container.push(<div key={index}>
                              val
                              </div>)
                            });
                       return container;     
           })()}
   
        </div>
     </div>
   )

Comments

হ্যাঁ। আমার বর্তমান প্রকল্পে, আমি পদ্ধতি 1 ব্যবহার করি, যেমন এইচটিএমএল নির্বাচনের উপাদান তৈরি করতে অ্যারে.প্রোটোটাইপ, ফরএচ () পদ্ধতি ব্যবহার করি যা ডেটাবেস থেকে ডেটা দ্বারা পপুলিটেড হয়। যাইহোক, মানচিত্রের পদ্ধতিটি আরও কমপ্যাক্ট (কম কোড) দেখায় বলে আমি সম্ভবত আরে.প্রোটোটাইপ.ম্যাপ () পদ্ধতিতে তাদের প্রতিস্থাপন করব।

— লেক্স সফট

Answer 24

এটির একটি সহজ সমাধান এখানে।

var Object_rows=[];
for (var i=0; i < numrows; i++) {
    Object_rows.push(<ObjectRow/>)
} 
<tbody>
  {Object_rows}
</tbody>

কোনও ম্যাপিং এবং জটিল কোডের প্রয়োজন নেই You আপনাকে কেবল সারিগুলিকে অ্যারেতে চাপতে হবে এবং এটি রেন্ডার করতে মানগুলি ফিরিয়ে দিতে হবে।

Comments

এইচটিএমএল নির্বাচন উপাদান তৈরি করার সময়, এই অনুরূপ কৌশলটি আমার মনে প্রথমে আসে, সুতরাং আমি এটি ব্যবহার করেছি, যদিও আমি forEach () পদ্ধতিটি ব্যবহার করি। তবে আমি যখন তালিকা এবং কীগুলির বিষয়গুলিতে প্রতিক্রিয়া ডকটি পুনরায় পাঠ করি, তখন আমি দেখতে পেলাম যে তারা মানচিত্র () পদ্ধতিটি ব্যবহার করে যা এখানে বেশ কয়েকটি উত্তর দ্বারা দেখানো হয়েছে। এটি আমার মনে করে যে এটি পছন্দসই উপায়। আমি সম্মত, যেহেতু এটি আরও কমপ্যাক্ট দেখাচ্ছে (কম কোড)।

— লেক্স সফট

Answer 25

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

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>

Answer 26

প্রতিক্রিয়া ডকের একটি নমুনা এখানে: শিশু হিসাবে জাভাস্ক্রিপ্ট এক্সপ্রেশন

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

আপনার ক্ষেত্রে হিসাবে, আমি এই জাতীয় লেখার পরামর্শ দিই:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

দয়া করে লক্ষ্য করুন কীটি খুব গুরুত্বপূর্ণ, কারণ অ্যারেতে ডেটা পৃথক করতে কী ব্যবহার করুন।

Answer 27

আমি এটি পছন্দ মত

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

Answer 28

আপনি যেমন কিছু করতে পারেন:

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

Answer 29

দুর্দান্ত প্রশ্ন।

আমি নির্দিষ্ট সংখ্যক উপাদান যুক্ত করতে চাইলে আমি যা করি তা হেল্পার ফাংশনটি ব্যবহার করে।

জেএসএক্সকে ফিরিয়ে দেয় এমন একটি ফাংশন সংজ্ঞায়িত করুন:

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

Answer 30

আপনি একটি স্ব-আমন্ত্রণমূলক ফাংশনও ব্যবহার করতে পারেন:

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>

Comments

রেন্ডারের ভিতরে বেনামে ফাংশন ব্যবহার করা প্রতিক্রিয়া হিসাবে একটি ভাল অনুশীলন হিসাবে বিবেচিত হয় না, কারণ এই ফাংশনগুলি প্রতিটি পুনঃ-রেন্ডারে পুনরায় তৈরি বা বাতিল করতে হবে।

— ভ্লাতকো ভ্লাহেখ

@ ভ্লাতকোভেলহেক আপনি ফাংশন প্রপসের সাথে প্রতিটি রেন্ডার চক্রটিকে পুনরায় তৈরি করা হচ্ছে যা ভুল স্কেল করে যা বড় স্কেলে দরিদ্র পারফরম্যান্সের দিকে নিয়ে যেতে পারে। অন্য কোথাও বেনামে ফাংশন তৈরি করা কোনও উল্লেখযোগ্য উপায়ে কার্য সম্পাদনকে প্রভাবিত করবে না।

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

@ এমিলিবার্গারন এটি কিছুক্ষণ আগে হা হা। আমি যদি এটিকে প্রপ হিসাবে ব্যবহার না করা হয় তবে তাতে কোনও পার্থক্য নেই agree

— ভ্লাতকো ভ্লাহेक