Soy nuevo en React y no puedo descifrar cómo agregar componentes anidados al DOM de forma recursiva (de hecho, estoy empezando a sospechar que esto puede no ser posible, de todos modos). Así que este es el escenario real: estoy tratando de renderizar un tablero de juego que es básicamente solo un espacio de cuadrícula de 12x12. Ahora esto se hace fácilmente así (usando React-Bootstrap por cierto):
<Container> <Row> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> </Row> <Row> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> <Col></Col> </Row> ...x6 (you get the point) </Container>¡Ay! ¡Que desastre! Shirley, ¿DEBE haber una forma más limpia y SECA de hacer esto? El único problema es que no puedo entenderlo. Aquí está la iteración actual de una de las muchas implementaciones que he probado:
const GameBoard = () => { let boardLayout = () => { let board = ``; for (let i = 1; i <= 12; i++) { let row = `<Row>`; for (let j = 1; j <= 12; j++) { if ((i == 1 || i == 12) && (j == 1 || j == 12)) { row.append(`<Col><BaseTile /></Col>`) } row.append(`<Col><GrassTile /></Col>`) } row.append(`</Row>`) board.append(row) } return board; } return ( <Container>{boardLayout}</Container> ); }Por supuesto, el código anterior no funciona. Pero ahora me quedé sin ideas, y cada vez que intento buscar en la documentación o buscar tutoriales, me salen más preguntas que respuestas.
Estructure sus datos de una manera que tenga sentido para que su componente los represente.
const data = { rows: [ { columns: 12 }, { columns: 12 }, { columns: 12 } ] } export default function Component() { return ( data.rows.map((row, index) => <div className="row" key={index}>Row { [...Array(row.columns).keys()].map((column) => <div className="column" key={column}>Column</div>) } </div> ) ) }Soy lento en el juego ya que Konrad básicamente te dio lo mismo, pero pensé que dejaría esto aquí de todos modos.
Es mucho más fácil usar CSS Grid para esto. Solo necesita un ciclo en el que cambia entre los componentes según la configuración. En este ejemplo, solo estoy alternando entre las clases "hierba" y "base" según el valor del índice.
Para una cuadrícula de 12x12, cambie los accesorios de fila/columna que se pasan a Grid de 5 a 12 y actualice los detalles de grid-template-columns en el CSS para que coincidan.
function Grid({ rows, columns }) { function buildGrid(rows, columns) { const grid = []; for (let i = 1; i <= rows * columns; i++) { const type = i % 2 === 0 ? 'grass' : 'base'; const classes = `box ${type}`; grid.push(<div className={classes}>{i}</div>); } return grid; } return ( <div className="grid"> {buildGrid(rows, columns)} </div> ); } ReactDOM.render( <Grid rows="5" columns="5" />, document.getElementById('react') ); .grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 5px;} .box { display: flex; border: 1px solid #676767; height: 40px; width: 40px; justify-content: center; align-items: center; } .base { background-color: #efefef; } .grass { background-color: LightGreen; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>const GameBoard = () => { const width = 12; return ( <Container> {[...Array(width).keys()].map(y => ( <Row> {[...Array(width).keys()].map(x => ( <Col> { (y == 1 || y == 12) && (x == 1 || x == 12) ? 'BaseTile' : 'GrassTile'} </Col> ))} </Row> ))} </Container> ); }Por favor, lea los documentos