मेरे पास ग्रिडस्क्वायर नामक एक साधारण घटक है:

import React from 'react';
import './GridSquare.css'

const GridSquare = (props) => {
    
    return (
    <div className="empty-square">
    </div>
    )
}

export default GridSquare;

GridSquare की css फ़ाइल सिर्फ div को एक साधारण ग्रे वर्ग बना रही है:

.empty-square{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #555;  
}

मैं ग्रिड नामक एक घटक के साथ इन वर्गों का ग्रिड बनाने की कोशिश कर रहा हूं। मुझे 2d सरणी को मैप करने में कठिनाई हो रही है। एक आयामी सरणी का मानचित्रण ठीक काम करता है लेकिन 2d सरणी सिर्फ खाली divs को प्रिंट करता है।

import React from 'react';
import GridSquare from './GridSqure'

const GameGrid= () => {
    const gamegrid=new Array(20);
    for(let i =0; i<gamegrid.length; i++)
        gamegrid[i] = new Array(20);

    console.log(gamegrid);
    
    return(
        <div>
            {
            gamegrid.map((row)=> 
            {
                return (
                    <div>
                        {
                            row.map(() => <GridSquare/>)
                        }
                    </div>
                )})
            }
        </div>
    )
}

export default GameGrid;

मुझे किसकी याद आ रही है?

2
Maor Magori 17 सितंबर 2020, 18:03

3 जवाब

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

new Array(20) 20 खाली तत्वों की एक सरणी बनाता है।
नक्शा विधि खाली तत्वों को अनदेखा करती है, इसलिए आपको अपना सरणी भरना चाहिए: gamegrid[i] = new Array(20).fill(null);

3
Louis Coulet 17 सितंबर 2020, 18:20

इस तरह से सरणी शुरू करना पर्याप्त नहीं है। आपको इसके तत्वों को भी पॉप्युलेट करना चाहिए:

for(let i =0; i<gamegrid.length; i++) {
    gamegrid[i] = new Array(20);
    gamegrid[i].fill(1); // this is just an example value
}

साथ ही, आपको उन सभी तत्वों की कुंजी जोड़नी चाहिए जिन्हें आप मैप कर रहे हैं:

return(
    <div>
        {
        gamegrid.map((row, i1)=> 
        {
            return (
                <div key={i1}>
                    {
                        row.map((el, i2) => <GridSquare key={i2} />)
                    }
                </div>
            )})
        }
    </div>
)
0
Filip Egeric 17 सितंबर 2020, 18:21

आपके पास इसे इस तरह क्यों नहीं है:

{[...Array(20)].map(() => (
  <div>
    {[...Array(20)].map(() => (
      <GridSquare/>
    ))}
  </div>
))}

GameGrid कॉन्स्ट में बाहर ग्रिड के आयामों को परिभाषित करने के बजाय, आप स्पष्ट रूप से 20 की एक सरणी बनाते हैं, इसके माध्यम से मैप करते हैं, और 20< की एक और सरणी बनाते हैं /code> अपना 20X20 ग्रिड प्राप्त करने के लिए।

ध्यान दें आप 20 को let size = 20 जैसे चर के रूप में रख सकते हैं, इसलिए यह भाग [...Array(20)] [...Array(size)]
बन जाता है यह आपको अपने ऐप के ग्रिड आकार को गतिशील रूप से बदलने की क्षमता देगा

1
akram-adel 17 सितंबर 2020, 18:23