অবজেক্টের অ্যারে থেকে রেন্ডারিং রিঅ্যাক্ট উপাদানগুলি

Question 1

আমার কাছে স্টেশান নামক কিছু ডেটা রয়েছে যা একটি অ্যারে যা অবজেক্টসযুক্ত।

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

আমি প্রতিটি অ্যারে পজিশনের জন্য একটি ইউআই উপাদান রেন্ডার করতে চাই। এখন পর্যন্ত আমি লিখতে পারি

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

এবং তারপর রেন্ডার

render(){
 return (
   {stationsArr}
 )
}

সমস্যাটি হ'ল আমি সমস্ত তথ্য মুদ্রণ করে আছি। আমি পরিবর্তে কেবল একটি চাবি প্রদর্শন করতে চাই {this.data.call}তবে এটি কিছুই মুদ্রণ করে না।

আমি কীভাবে এই ডেটাটি লুপ করব এবং অ্যারের প্রতিটি পজিশনের জন্য একটি নতুন ইউআই উপাদান ফিরিয়ে আনব?

Question 2

আপনি স্টেশনগুলির তালিকাকে প্রতিক্রিয়া উপাদানগুলিতে ম্যাপ করতে পারেন।

প্রতিক্রিয়া> = 16 দিয়ে, অতিরিক্ত এইচটিএমএল উপাদান মোড়কের প্রয়োজন ছাড়াই একই উপাদান থেকে একাধিক উপাদান ফেরত পাওয়া সম্ভব। 16.2 সাল থেকে, টুকরো তৈরি করার জন্য একটি নতুন বাক্য গঠন <> যদি এটি কাজ না করে বা আপনার আইডিই সমর্থন করে না, আপনি <React.Fragment>পরিবর্তে ব্যবহার করতে পারেন । 16.0 থেকে 16.2 এর মধ্যে আপনি টুকরোগুলির জন্য খুব সাধারণ পলিফিল ব্যবহার করতে পারেন ।

নিম্নলিখিত চেষ্টা করুন

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});

var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

keyগুণটি ভুলে যাবেন না !

https://jsfiddle.net/69z2wepo/14377/

Question 3

আমার কাছে এমন উত্তর আছে যা আমার মতো নতুনদের জন্য কিছুটা বিভ্রান্তি হতে পারে। আপনি কেবল mapউপাদানগুলি রেন্ডার পদ্ধতিতে ব্যবহার করতে পারেন ।

render () {
   return (
       <div>
           {stations.map(station => <div key={station}> {station} </div>)} 
       </div>
   );
}

Question 4

this.data সম্ভবত সমস্ত ডেটা ধারণ করে, তাই আপনাকে এরকম কিছু করার দরকার হবে:

var stations = [];
var stationData = this.data.stations;

for (var i = 0; i < stationData.length; i++) {
    stations.push(
        <div key={stationData[i].call} className="station">
            Call: {stationData[i].call}, Freq: {stationData[i].frequency}
        </div>
    )
}

render() {
  return (
    <div className="stations">{stations}</div>
  )
}

অথবা আপনি mapযদি ES6 ব্যবহার করছেন তবে আপনি ব্যবহার করতে পারবেন এবং তীর ফাংশনগুলি:

const stations = this.data.stations.map(station =>
    <div key={station.call} className="station">
      Call: {station.call}, Freq: {station.frequency}
    </div>
);

Question 5

বেশ কয়েকটি উপায় রয়েছে যা ব্যবহার করা যায়।

const stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
];
const callList = stations.map(({call}) => call)

সমাধান 1

<p>{callList.join(', ')}</p>

সমাধান 2

<ol>    
  { callList && callList.map(item => <li>{item}</li>) }
</ol>

অবশ্যই উপলব্ধ অন্যান্য উপায় আছে।