javascript - रिएक्ट जेएसएक्स के अंदर लूप




reactjs (20)

नक्शा समारोह + कुंजी के साथ ES2015 Array.from

यदि आपके पास Array.from() के लिए कुछ भी नहीं है, तो आप तत्वों को दोहराने के लिए mapFn साथ Array.from() उपयोग कर सकते हैं:

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

मैं प्रतिक्रिया जेएसएक्स में निम्नलिखित की तरह कुछ करने की कोशिश कर रहा हूं (जहां ऑब्जेक्टरो एक अलग घटक है):

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

मुझे एहसास है और समझ में आता है कि यह वैध जेएसएक्स क्यों नहीं है, क्योंकि जेएसएक्स मानचित्र कॉल करने के लिए मानचित्र हैं। हालांकि, टेम्पलेट भूमि से आने और जेएसएक्स के लिए नया होने के नाते, मुझे यकीन नहीं है कि मैं उपर्युक्त कैसे प्राप्त करूंगा (एक घटक को कई बार जोड़ना)।


... या आप वांछित आउटपुट रखने के लिए ऑब्जेक्ट्स की एक सरणी भी तैयार कर सकते हैं और इसे फ़ंक्शन में मैप कर सकते हैं। मैं इसे पसंद करता हूं, क्योंकि यह मुझे रेंडर की वापसी के अंदर कोई तर्क नहीं के साथ कोडिंग के अच्छे अभ्यास को बनाए रखने में मदद करता है।

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

आप एक स्व-चालान समारोह का भी उपयोग कर सकते हैं:

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

           })()}
        </tbody>

आप कुछ ऐसा कर सकते हैं:

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

आप निश्चित रूप से अन्य उत्तर द्वारा सुझाए गए .map के साथ हल कर सकते हैं। यदि आप पहले से ही बेबेल का उपयोग करते हैं, तो आप jsx-control-statements का उपयोग करने के बारे में सोच सकते हैं, उन्हें थोड़ी सी सेटिंग की आवश्यकता होती है, लेकिन मुझे लगता है कि यह पठनीयता (विशेष रूप से गैर-प्रतिक्रिया डेवलपर के लिए) के मामले में लायक है। यदि आप एक eslint-plugin-jsx-control-statements का उपयोग करते हैं, तो eslint-plugin-jsx-control-statements


आप रिटर्न ब्लॉक के बाहर भी निकाल सकते हैं:

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

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

इसके बारे में सोचें जैसे आप जावास्क्रिप्ट फ़ंक्शंस को कॉल कर रहे हैं। आप फंक्शन कॉल के अंदर लूप नहीं डाल सकते हैं:

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

लेकिन आप एक सरणी बना सकते हैं, और उसके बाद इसे पास कर सकते हैं:

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

संयोग से, मेरा जावास्क्रिप्ट उदाहरण लगभग जेएसएक्स का उस उदाहरण में बदल गया है। जेएसएक्स कैसे काम करता है इसके बारे में महसूस करने के लिए बेबेल आरईपीएल के साथ खेलें।


एक ES2015 / Babel संभावना JSX की सरणी बनाने के लिए जनरेटर फ़ंक्शन का उपयोग कर रही है:

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

...

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

चूंकि आप जेएसएक्स कोड के अंदर जावास्क्रिप्ट सिंटैक्स लिख रहे हैं, इसलिए आपको घुंघराले ब्रेसिज़ में अपनी जावास्क्रिप्ट को लपेटने की जरूरत है।

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

बस ES6 वाक्यविन्यास के साथ नक्शा ऐरे विधि का उपयोग कर:

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

key संपत्ति मत भूलना।


महान सवाल

जब मैं घटकों की एक निश्चित संख्या जोड़ना चाहता हूं तो मैं एक सहायक कार्य का उपयोग करता हूं।

जेएसएक्स लौटने वाले फ़ंक्शन को परिभाषित करें:

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

//... in JSX

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

मुझे पता है कि यह एक पुराना धागा है, लेकिन हो सकता है कि आप http://wix.github.io/react-templates/ को चेकआउट करना चाहें, जो आपको कुछ निर्देशों के साथ प्रतिक्रिया में जेएसएक्स-स्टाइल टेम्पलेट्स का उपयोग करने देता है (जैसे आरटी- दोहराएँ)।

आपका उदाहरण, यदि आपने प्रतिक्रिया-टेम्पलेट का उपयोग किया है, तो यह होगा:

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

मैं इसका उपयोग करता हूं:

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

पीडी: कुंजी को कभी न भूलें या आपके पास बहुत सारी चेतावनियां होंगी!


मैं ऐसे दृष्टिकोण का पक्ष लेता हूं जहां प्रोग्रामिंग तर्क render करने के वापसी मूल्य के बाहर होता है। यह वास्तव में ग्रोक के लिए आसान प्रदान करने में मदद करता है।

तो मैं शायद कुछ ऐसा करूंगा:

import _ from 'lodash';

...

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

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

माना जाता है कि यह इतनी छोटी मात्रा में कोड है जो इसे रेखांकित करने से ठीक काम कर सकता है।


यदि आप इसे रेंडर विधि के अंदर () के अंदर परिवर्तित करने का विकल्प चुनते हैं, तो सबसे आसान विकल्प मानचित्र () विधि का उपयोग करेगा। मानचित्र () फ़ंक्शन का उपयोग करके जेएसएक्स सिंटैक्स में अपनी सरणी को मैप करें, जैसा कि नीचे दिखाया गया है ( ES6 वाक्यविन्यास का उपयोग किया जाता है )।

मूल घटक के अंदर :

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

कृपया अपने बच्चे के घटक में जोड़ा गया key विशेषता ध्यान दें। यदि आपने मुख्य विशेषता प्रदान नहीं की है, तो आप अपने कंसोल पर निम्न चेतावनी देख सकते हैं।

चेतावनी: एक सरणी या पुनरावर्तक में प्रत्येक बच्चे को एक अद्वितीय "कुंजी" प्रोप होना चाहिए।

अब ऑब्जेक्टरो घटक पर आप ऑब्जेक्ट को इसके गुणों से एक्सेस कर सकते हैं।

ऑब्जेक्टरो घटक के अंदर

const { object } = this.props

या

const object = this.props.object

यह आपको ऑब्जेक्टरो घटक में परिवर्तनीय object में पैरेंट घटक से पारित object लाएगा । अब आप उस उद्देश्य में अपने उद्देश्य के अनुसार मूल्यों को थूक सकते हैं।

संदर्भ:

map

ईसीएमए स्क्रिप्ट 6 या ईएस 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>
        );
    }
}

यह कई तरीकों से किया जा सकता है।

  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>

कोई मानचित्रण और जटिल कोड आवश्यक नहीं है। आपको केवल पंक्तियों को सरणी में धक्का देना है और इसे प्रस्तुत करने के लिए मानों को वापस करना होगा।


सुनिश्चित नहीं है कि यह आपकी स्थिति के लिए काम करेगा, लेकिन अक्सर map एक अच्छा जवाब है।

यदि यह लूप के साथ आपका कोड था:

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

आप इसे map साथ लिख सकते हैं:

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

ईएस 6 वाक्यविन्यास:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</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>
); 

आप गिटहब पर पूरा फ़ीचरलिस्ट कोड देख सकते हैं। विशेषताएं स्थिरता यहां सूचीबद्ध है





reactjs