0
262
ViewsUsando un mapa 2D en React para imprimir un tablero de ajedrez
Soy bastante nuevo para reaccionar, pero en lugar de usar js for loop común, estoy tratando de descubrir cómo usar .map() para lograr el mismo resultado.
import React from 'react' import './styles/Board.css' import Tile from './Tile' const Board = () => { let board = [] printBoard(board) return ( <div className="board"> { board } </div> ) } const printBoard = (board) => { const boardY = [1, 2, 3, 4, 5, 6, 7, 8] const boardX = ['a','b','c','d','e','f','g','h'] for(let x = 0; x < boardX.length; x++) { for(let y = boardY.length - 1; y >= 0; --y) { //saves the position in each square ex: b1 const pos = boardX[x] + "" + boardY[y] //paints the squares and the positions board.push(<Tile key={pos} color={ (x + y) % 2 === 0 ? "dark" : "light" } pos={pos} />) } } } export default Boardrenderizado actual
·
Juan Pablo Isaza
2 answers
Answer question0
Debe cambiar los bucles (exterior e interior) al hacer lo mismo con la función de map . Y la y tuvo que ser reemplazada por (boardY.length - (yIndex + 1)) para obtener el índice decreciente.
Prueba a continuación
const Board = () => { return <div className="board">{printBoard()}</div>; }; const printBoard = () => { const boardY = [1, 2, 3, 4, 5, 6, 7, 8]; const boardX = ["a", "b", "c", "d", "e", "f", "g", "h"]; const boardYRevered = boardY.reverse(); return boardYRevered.flatMap((y, yIndex) => { return boardX.map((x, xIndex) => { const pos = `${x}${y}`; return ( <Tile key={pos} color={ (xIndex + (boardY.length - (yIndex + 1))) % 2 === 0 ? "dark" : "light" } pos={pos} /> ); }); }); }; NOTA: si desea una 2D array del tablero de ajedrez, cambie flatMap a map .
·
Juan Pablo Isaza
Report
0
import React from "react"; const Board = () => { const boardY = [1, 2, 3, 4, 5, 6, 7, 8]; const boardX = ["a", "b", "c", "d", "e", "f", "g", "h"]; const reverseY = boardY.reverse(); return ( <div className="board"> {boardX.map((xValues,indexX) => reverseY.map((yValues, indexY) => { const pos = xValues + "" + yValues; const colorIndex = indexX + indexY; <Tile key={pos} color={ colorIndex % 2 === 0 ? "dark" : "light" } pos={pos} /> }) )} </div> ); }; export default Board;
·
Juan Pablo Isaza
Report
Answer question