मैं एक for लूप का उपयोग करके JSX में दोहराए जाने वाले ब्लॉक को प्रस्तुत करने का प्रयास कर रहा हूं, और इस तरह मैं इसके बारे में गया।

मेरे घटक में, लेकिन मेरे रेंडर के बाहर, मेरा कार्य निम्नानुसार है:

tenCards = () => {

    let block = [];

    /* Outer loop for container */
    for(var i = 0; i < 11; i+2){
        block.push(
            <div className="container">
                <Card id={i}/>
                <Card id={i+1}/>
            </div>
        );
    }

    return block;
}

और मेरे रेंडर के अंदर मैं साधारण कॉलिंग {this.tenCards()} कर रहा हूं। मुझे एक सिंटैक्स त्रुटि मिल रही थी, और अब यह सफलतापूर्वक संकलित करता है, लेकिन पृष्ठ कभी लोड नहीं होता है, और मुझे मिलता है

ओह स्नैप क्रोम त्रुटि।

क्या मैं सिर्फ लूप के लिए गलत कर रहा हूँ?

I+2 को i+=2 के साथ स्विच करने के बाद यह एक कदम आगे बढ़ता है, लेकिन JSX का कहना है कि संपत्ति मूल्यों को अभिव्यक्ति या पाठ होना चाहिए, इसलिए id={i} काम नहीं कर रहा है और इसके चारों ओर उद्धरण डालने से यह एक स्ट्रिंग बन जाता है और कुछ के लिए कारण मैं \ के उद्धरणों से बच नहीं सकता।

मैंने संपत्ति त्रुटि को ठीक किया है कि इसे इस तरह की एक स्ट्रिंग होने की आवश्यकता है

<Card id={`${i}`} />

तो इस तरह JSX को पता था कि यह एक जावास्क्रिप्ट एक्सप्रेशन था जिसने 0 और 10 के बीच की संख्या दी थी और बाद में `` उद्धरणों को इसे एक स्ट्रिंग बनाने के लिए संख्या के चारों ओर रखा गया था। यदि आप इसे करने का एक आसान तरीका जानते हैं तो कृपया टिप्पणी करें, लेकिन यह मेरे लिए काम करता है।

0
user9069254 29 मार्च 2018, 03:11

2 जवाब

सबसे बढ़िया उत्तर

मैंने संपत्ति त्रुटि को ठीक किया है जिसे इस तरह की एक स्ट्रिंग होने की आवश्यकता है:

<Card id={`${i}`} />

तो इस तरह JSX को पता था कि यह एक जावास्क्रिप्ट एक्सप्रेशन था जिसने 0 और 10 के बीच की संख्या दी थी और बाद में `` उद्धरणों को इसे एक स्ट्रिंग बनाने के लिए संख्या के चारों ओर रखा गया था। यदि आप इसे करने का एक आसान तरीका जानते हैं तो कृपया टिप्पणी करें, लेकिन यह मेरे लिए काम करता है।

1
Peter Mortensen 14 अप्रैल 2018, 08:38

समस्या for लूप में है। i + 2 को i += 2 से बदलें।

1
bc1105 29 मार्च 2018, 00:23