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




jquery reactjs (4)

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

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

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

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

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

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

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"
    ...
  );
}

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


আমি 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>
    );
}

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

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

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

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

আপডেট করা হয়েছে: প্রতিক্রিয়া> 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>
));

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

পুরানো:

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

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 এবং fancy .map ব্যবহার করতে পারেন

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

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

হিসাবে ডক্স here বলে

বর্তমানে, একটি কম্পোনেন্ট এর রেন্ডারে, আপনি শুধুমাত্র একটি নোড ফেরত দিতে পারেন; যদি আপনি divs একটি তালিকা ফিরে, বলুন, আপনি আপনার উপাদান একটি div, span বা অন্য কোন উপাদান মধ্যে মোড়ানো আবশ্যক।






react-jsx