javascript - tutorial - redux




রেস্যাক্ট JSX ভিতরে লুপ (20)

ES2015 Array.from মানচিত্র ফাংশন সঙ্গে + কী

যদি আপনার কাছে .map() কোনও না থাকে তবে আপনি উপাদানগুলি পুনরাবৃত্তি করতে mapFn দিয়ে Array.from() ব্যবহার করতে পারেন:

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

আমি প্রতিক্রিয়াশীল JSX (যেখানে ObjectRow একটি পৃথক উপাদান হয়) তেমন কিছু করার চেষ্টা করছি:

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

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


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

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>
  )
}

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

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

যেখানে i = number of times


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

এটি অবৈধ, ফাংশন ফেরত ভেরিয়েবল সঞ্চয় করার জন্য একটি অ্যারে ব্যবহার করার একমাত্র উপায়।

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

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


আপনি ইতিমধ্যে লোডশ ব্যবহার করছেন, _.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>
        );
    }
}

আপনি একটি স্ব-উদ্ঘাটন ফাংশন ব্যবহার করতে পারেন:

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

           })()}
        </tbody>

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

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

<tbody> { objectArray.map((object, index) => <ObjectRow key={index} object={object}>) } </tbody>

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

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

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

ObjectRow উপাদান ভিতরে

const { object } = this.props

অথবা

const object = this.props.object

এটি আপনার অবজেক্টরোর উপাদানতে প্যারেন্ট উপাদান থেকে পরিবর্তনশীল object প্রেরিত object আনতে হবে । এখন আপনি আপনার উদ্দেশ্য অনুযায়ী যে বস্তুর মান খুঁজে বের করতে পারেন।

রেফারেন্স:

map

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


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

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

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

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

[{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>

আমি এই ব্যবহার

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

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


আমি এটা ব্যবহার করে

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

আমি জানি এটি একটি পুরানো থ্রেড, তবে আপনি চেকআউট করতে পারেন http://wix.github.io/react-templates/ , যা আপনাকে প্রতিক্রিয়াতে jsx- শৈলী টেম্পলেটগুলি ব্যবহার করতে দেয়, কয়েকটি নির্দেশনা সহ (যেমন RT- পুনরাবৃত্তি)।

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

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

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

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

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

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>
      {(() => {
        let rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

এই বহুবিধ উপায়ে করা যাবে।

  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>
    )

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

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

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


এখানে রে্যাক্ট ডক থেকে একটি নমুনা রয়েছে: https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions-as-children

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

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


গ্রেট প্রশ্ন।

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

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

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

//... in JSX

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

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

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

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


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

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

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

map বিবৃতি ব্যবহার করে ইঙ্গিত করা অনেক উত্তর আছে। ফিচারলিস্ট কম্পোনেন্টের মধ্যে একটি ইনারারটার ব্যবহার করে বৈশিষ্ট্যগুলি তালিকাভুক্ত করা একটি 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>
); 

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





reactjs