কীভাবে অবজেক্টের অ্যারে মানচিত্রের বিনা ছাড়াই React.js এ উপাদানগুলি লুপ এবং রেন্ডার করবেন?

Question

আমি একটি jQuery উপাদানকে React.js এ রূপান্তর করার চেষ্টা করছি এবং যে জিনিসগুলির সাথে আমার অসুবিধা হচ্ছে তার মধ্যে একটি হ'ল লুপের উপর ভিত্তি করে এন সংখ্যাগুলির রেন্ডারিং করা।

আমি বুঝতে পারি এটি সম্ভব নয়, বা প্রস্তাবিত এবং এটি যেখানে মডেলটিতে একটি অ্যারে উপস্থিত থাকে এটি ব্যবহারের সম্পূর্ণ ধারণা দেয় map। এটি ঠিক আছে, তবে যখন আপনার অ্যারে নেই তখন কী হবে? পরিবর্তে আপনার কাছে এমন একটি সংখ্যাসূচক মান রয়েছে যা প্রদত্ত সংখ্যক উপাদানের সমান হতে পারে, তারপরে আপনার কী করা উচিত?

আমার উদাহরণটি এখানে, আমি এটির শ্রেণিবিন্যাসের স্তরের উপর ভিত্তি করে একটি মৌলিক সংখ্যক স্প্যান ট্যাগ সহ একটি উপাদানকে উপস্থাপন করতে চাই। সুতরাং স্তর 3, আমি টেক্সট উপাদান আগে 3 স্প্যান ট্যাগ চাই।

জাভাস্ক্রিপ্টে:

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

আমি এটি, বা জেএসএক্স রিএ্যাক্ট.জেএস উপাদানতে কাজের অনুরূপ কিছু পেয়েছি বলে মনে হচ্ছে না। পরিবর্তে আমাকে নিম্নলিখিতটি করতে হয়েছিল, প্রথমে সঠিক দৈর্ঘ্যে একটি অস্থায়ী অ্যারে তৈরি করা এবং তারপরে অ্যারে লুপিং করা।

React.js

render: function() {
  var tmp = [];
  for (var i = 0; i < this.props.level; i++) {
    tmp.push(i);
  }
  var indents = tmp.map(function (i) {
    return (
      <span className='indent'></span>
    );
  });

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

অবশ্যই এটি সর্বোত্তম হতে পারে না, বা এটি অর্জনের একমাত্র উপায়? আমি কী মিস করছি?

Comments

ফেসবুক.

— github.io/react/docs/…

এছাড়াও আপনি কেবল এটি করতে পেরেছিলেন: jsfiddle.net/crl/69z2wepo/19804

— কাউব

Answer 1

আপডেট হয়েছে: প্রতিক্রিয়া হিসাবে> 0.16

রেন্ডার পদ্ধতিতে অগত্যা কোনও একক উপাদান ফেরত দিতে হয় না। একটি অ্যারেও ফিরে পাওয়া যায়।

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return indents;

অথবা

return this.props.level.map((item, index) => (
    <span className="indent" key={index}>
        {index}
    </span>
));

ডক্স এখানে জেএসএক্স শিশুদের সম্পর্কে ব্যাখ্যা করে

---

পুরানো:

পরিবর্তে আপনি একটি লুপ ব্যবহার করতে পারেন

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

আপনি .map এবং অভিনব এস 6 ব্যবহার করতে পারেন

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className='indent' key={index} />
    ))}
    "Some text value"
   </div>
);

এছাড়াও, আপনাকে কোনও ধারকটিতে ফেরতের মানটি মুড়ে দিতে হবে। আমি উপরের উদাহরণে ডিভ ব্যবহার করেছি

এখানে ডক্স যেমন বলে

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

Comments

এটি কার্যকর, এবং এটি অনেক সহজ ধন্যবাদ। হ্যাঁ আমি সচেতন যে আপনাকে ধারকটিতে ফেরতের মানটি আবদ্ধ করতে হবে, আমি এটি করছি যা ইতিমধ্যে এটি উদাহরণ থেকে অনুপস্থিত।

— জোনাথন মাইলস

লুপের ভিতরে কী যুক্ত করুন। কীগুলি প্রতিক্রিয়া জানাতে গুরুত্বপূর্ণ।

— আমির আফ্রিদি

আমি আপনাকে আমার সমস্ত জীবনের সন্ধান করছি

— ওলেহ

@ এলজস কিয়ানচেন এটি সম্ভব নয় এটি কিছু ট্যাগ দিয়ে আবৃত করতে হবে। যদি {সূচকগুলি it এর ভিতরে থাকা সামগ্রী সহ কোনও ডোম উপাদানগুলি ফেরত দেয় তবে ঠিক আছে

— ধীরাজ

এই উত্তরটিতে কেন মানচিত্রের পদ্ধতি উল্লেখ করা হয়েছে তা আমি বুঝতে পারছি না, কারণ এটি কেবল অ্যারে অবজেক্টগুলির জন্যই কাজ করে, যা প্রশ্নটি পরিষ্কারভাবে বলেছে এটি তেমন নয়।

— flukyspore

Answer 2

কিছু ES6 বৈশিষ্ট্য সহ এখানে আরও কার্যকরী উদাহরণ রয়েছে:

'use strict';

const React = require('react');

function renderArticles(articles) {
    if (articles.length > 0) {      
        return articles.map((article, index) => (
            <Article key={index} article={article} />
        ));
    }
    else return [];
}

const Article = ({article}) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

const Articles = React.createClass({
    render() {
        const articles = renderArticles(this.props.articles);

        return (
            <section>
                { articles }
            </section>
        );
    }
});

module.exports = Articles;

Comments

এটি এটি করার 'সর্বাধিক' প্রতিক্রিয়ার মতো দেখাচ্ছে like অন্য উপ উপাদানগুলিতে প্রপস হিসাবে মানগুলি পাস করুন। ধন্যবাদ!

— মাইকেল জিওভানি পুমো

এটা দারুন! আপনার রেন্ডার () এইচটিএমএল ভারী হওয়ার জন্য উপযুক্ত।

— ম্যাথেজ

এটি আরও ES6 করতে আপনি ব্যবহার করতে পারেন import React from "react"এবংexport default Articles

— jonlink

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

— জোনাথন মাইলস

Answer 3

আমি Object.keys(chars).map(...)রেন্ডারে লুপ ব্যবহার করছি

// chars = {a:true, b:false, ..., z:false}

render() {
    return (
       <div>
        {chars && Object.keys(chars).map(function(char, idx) {
            return <span key={idx}>{char}</span>;
        }.bind(this))}
        "Some text value"
       </div>
    );
}

Comments

আপনার উত্তরটি আমার পক্ষে কাজ করেছিল, তবে আমি যুক্ত করার পরে chars && ...এবং .bind(this)আমার ফাংশন শেষে only আমি কৌতূহলী যে নিছক Object...(এতদূর এগিয়ে) কাজ করে না। আমি অপরিশোধিত হতে থাকি।

— m00saca

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

— জোনাথন মাইলস

Answer 4

Array.from()একটি অ্যারে এবং একটি alচ্ছিক মানচিত্র ফাংশনে রূপান্তর করতে পুনরাবৃত্তিযোগ্য অবজেক্টটি নেয়। আপনি নীচে .lengthহিসাবে একটি সম্পত্তি সঙ্গে একটি অবজেক্ট তৈরি করতে পারে :

return Array.from({length: this.props.level}, (item, index) => 
  <span className="indent" key={index}></span>
);

Comments

আমি গত সপ্তাহে এই শোনার পরে আপনার প্রশ্নটি দেখতে পেয়েছি, তাই আমি যা শিখেছি তা প্রয়োগ করার দ্রুততম উপায়! syntax.fm/show/043/…

— conradj

এক্স সংখ্যক উপাদান রেন্ডারিংয়ের জন্য আমার যা প্রয়োজন, ধন্যবাদ!

— লিরান এইচ

Answer 5

আমি মনে করি এটি প্রতিক্রিয়া জেএস এ লুপ করার সবচেয়ে সহজ উপায়

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>

Comments

এটি প্রশ্নের উত্তর দেয় না, উত্তর দেওয়ার চেষ্টা করার আগে দয়া করে প্রশ্নটি পুরোপুরি পড়ুন।

— জোনাথন মাইলস

এটি আমাকে সাহায্য করেছিল এবং আমার সময় বাঁচায়।

— অজয় মালহোত্রা