Tengo un pequeño problema con Reaccionar. Que no se puede crear un componente anidado con un bucle for. Lo que yo quiero hacer es crear 9 celdas de una tabla y, a continuación, crear 3 filas con 3 celdas de cada fila y después de que el monte de las 3 filas juntos y crear un tablero de 9×9.

Digamos que quiero conseguir algo como esto, pero el uso de un bucle

class Board extends React.Component {     
renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}

render(){    
    return(
        <div>
            <div className="board-row">
                {this.renderSquare(0)}
                {this.renderSquare(1)}
                {this.renderSquare(2)}
            </div>
            <div className="board-row">
                {this.renderSquare(3)}
                {this.renderSquare(4)}
                {this.renderSquare(5)}
            </div>
            <div className="board-row">
                {this.renderSquare(6)}
                {this.renderSquare(7)}
                {this.renderSquare(8)}
            </div>
        </div>
    );        
}

}

He buscado en otros pregunta por horas y creo que mi código es casi correcto, pero no hace lo que yo quiero. Solo obtengo una página en blanco.

aquí está mi código:

class Board extends React.Component { 
renderSquare(i) {
return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}
createCells(i){
if(i%3){return;}
var index = this.fillN(Array(i)); //index=[0,1,2,3,4,5,6,7,8]
var cells = [];
index.forEach(function(i){
cells.push(() => {
return(
<div>
{this.renderSquare(i)}
</div>
);
});
});
return cells;
}
createRows(cells){
var index = this.fillMod3(Array(3)); //index=[0,3,6]
var rows = []
index.forEach(function(i){
rows.push(() => {
return(
<div>
{cells[i]}
{cells[i+1]}
{cells[i+2]}
</div>
);
});
});
return rows;
}
render(){    
var cells = this.createCells(9);
var rows = this.createRows(cells);
var board = [];
var index = this.fillN(Array(1));
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
return(
<div>
{board[0]}
</div>
);        
}

Siempre me sale en la pantalla algo como esto:

<Board>
<div> /*empty*/ </div>
</Board>

Quiero aclarar que estoy seguro de que el resto del código con el que el componente (Junta) interactúa no tiene problemas.

Soy nuevo en reaccionar y si someoane me puede ayudar voy a apreciar mucho.
Lo siento por mi pobre inglés

EDIT1:
siguiente marklew ejemplos que debería ser capaz de hacer algo como esto

    render(){   
var index1 = this.fillN(Array(3)); //index1=[0,1,2]
var index2 = this.fillN(Array(3)); //index2=[0,1,2]
return(
<div>
{index1.map((e1,i1) => {
return(
<div key={i1} className="board-row">
{index2.map((e2, i2) => {
return(
<p key={i2+10}>
{this.renderSquare(i2)}
</p>
)
})}
</div>
)    
})}
</div>
);
}

pero no hace lo que quiero. Puedo obtener sólo una columna con 9 de las células y las células son los mismos objetos. Yo no entiendo por qué. (Entiendo que son los mismos objetos porque me asignar un identificador de la función onClick cuando creo que les gusta que:

<Board 
onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
/>

y me sale la X se ahogan en 3 celdas simultáneamente

EDIT2:
He llegado a una solución:

render(){   
var index1 = this.fillMod3(Array(3));        
return(
<div>
{index1.map((e,i) => {
return(
<div key={i} className="board-row">
{this.renderSquare(e)}
{this.renderSquare(e+1)}
{this.renderSquare(e+2)}
</div>
)    
})}
</div>
);
}

}

pero no es lo que quiero. Quiero otro bucle incluso para el pasante renderSquare(i) de la función.

InformationsquelleAutor neboduus | 2017-01-15

9 Comentarios

  1. 12

    Para representar una lista de elementos dentro de JSX, puedes hacer algo como que:

    render() {
    return <div>
    {
    [1,2,3].map ( (n) => {
    return this.renderSquare(n)
    })
    }
    </div>;
    }   

    Simplemente envuelva su matriz de componentes en {} en su JSX.

    Para aclarar un poco, esta es la misma lógica de:

    return <div>
    {
    [
    <h1 key="1">Hello 1</h1>,
    <h1 key="2">Hello 2</h1>,
    <h1 key="3">Hello 3</h1>
    ]           
    }
    </div>;

    Tenga en cuenta que cada vez que se procesa una matriz de componentes, usted debe proporcionar una key la proposición, como se ha señalado aquí.

    También, si usted desea simplemente imprimir valor de fila en el procesamiento de la función, se debe reemplazar:

    index.forEach(function(row){
    board.push(() => {
    return(
    <div>{row}</div>
    );
    });
    })

    con:

    index.forEach( (row, index) => {
    board.push(<div key={index}>{row}</div>)
    })

    o, sin embargo, la sustitución de forEach y push con map:

    board = index.map( (row, index) => <div key={index}>{row}</div> )

    EDITAR he creado un violín con un tablero de 9×9 el uso de su código como base: https://jsfiddle.net/mrlew/cLbyyL27/ (puede hacer clic en la celda para seleccionarla)

    • He actualizado mi respuesta con un violín
    • maravilloso trabajo! thx a lot!
    • Tal vez yo estoy entendiendo que el enlace que nos ha facilitado, pero dice claves deben ser asignados a los elementos de la lista y no dice nada acerca de las matrices de componentes en general.
  2. 5

    Veo que usted también está haciendo el JS Reaccionar tutorial! Esto es lo que hice, pero estoy trabajando en esto porque no tiene que ser una buena manera de dar a cada una de estas teclas.

    Me encontré con el mismo problema que se estaban ejecutando en donde la X se dibuja dentro de 3 plazas, y la razón por la que sucede se debe a que cuando se fueron de representación de plazas, algunas de las «i» se han duplicado. Así que hay varias Plazas con el «yo» de la 2 por ejemplo (al menos ese fue el caso de mi problema).

    Por lo que cada Cuadrado tiene un índice derecho? [0,1,2,3,4,5,6,7,8].

    Primero tenemos que encontrar cómo estos están relacionados de una manera en la que podemos convertirlos en filas! Así, en el ejemplo que han index1 y index2, que supongo se refieren a las coordenadas x e y de la Plaza en la Junta. Re-escribir la matriz anterior llegamos a: [{0,0}, {1,0}, {2,0}, {0,1}, {1,1}, {2,1}, {0,2}, {1,2}, {2,2}] el uso de {x,y} formato. ¿Cómo podemos utilizar estos valores (que a nosotros nos gustaría recibir de su index1 y index2 con el fin de obtener la matriz original de los valores que empezamos con [0,1,2,3,4,5,6,7,8]?

    Lo que yo hice fue 3 * x + y (o en un bucle, 3 * i + j). De esta manera cada cuadrado tiene un único «yo» valor asociado con él.

    Después de configurar mi bucles he utilizado este de MANERA posterior a que devuelva correctamente los elementos que he creado a partir de una función por separado (en un pobre intento de mantener mi código más limpio).

    Esto es lo que terminé con el, pero necesito asegúrese de configurar las teclas correctamente que en realidad es cómo me topé con este post:

    createSquares() {
    let rows = [];
    for(var i = 0; i < 3; i++){
    let squares = [];
    for(var j = 0; j < 3; j++){
    squares.push(this.renderSquare(3*i+j));
    }
    rows.push(<div className="board-row">{squares}</div>);
    }
    return rows;
    }

    Entonces mi render función en la Junta se parece a esto:

    render() {
    return (
    <div>
    {this.createSquares()}
    </div>
    );
    }
  3. 3

    Aquí es lo mejor que yo podía pensar después de leer las respuestas aquí y en Bucle dentro de Reaccionar JSX
    :

      render() {
    return (
    <div>
    {
    [...Array(3)].map((_, i) => (
    <div key={i} className="board-row">
    {
    [...Array(3)].map((_, j) => this.renderSquare(3 * i + j))
    }
    </div>
    ))
    }
    </div>
    );
    }

    P. S. yo también estoy haciendo los retos en la nueva Reaccionar Tutorial. =p

  4. 1

    Demostración en directo de codepen

    Bucles anidados en render() función
    (explicación en los comentarios:)

    class Board extends React.Component {
    renderSquare(i) {
    return (
    <Square
    value={this.props.squares[i]}
    key={i}
    onClick={() => this.props.onClick(i)}
    />
    );
    }
    render() {
    var self = this;
    return (
    <div>
    //you can use: [...Array(3)] instead of [1,2,3]
    {[1, 2, 3].map(function(row, rowIdx) { //create rows 
    return (
    <div className="board-row" key={rowIdx}>
    {
    //you can use: [...Array(3)] instead of [1,2,3]
    [1, 2, 3].map((col, colIdx) => { //create columns
    return self.renderSquare((3 * rowIdx) + colIdx); //calculate square index
    })
    }
    </div>
    );
    })}
    </div>
    );  
    }
    }
  5. 0

    Usted está empujando funciones a la board matriz. Si quieres hacerlos, tienes que llamar a esas funciones como

    {board[0]()}

    He preparado un ejemplo que cubre su problema: http://jsbin.com/hofohiy/edit?js salida

    • No entiendo cómo se podría solucionar mi problema -> tengo un error: {de la junta no es una función}
    • oh tal vez ahora que lo tengo, cuando tengo que hacer filas.push(() => { usted decir que estoy empujando una función en la matriz y no reaccionar elemento? Quiero empujar elementos, ¿cómo podría yo hacer eso?
  6. 0

    Estoy trabajando en el Reaccionar tutorial también. Gracias por sus respuestas. Llegué a esta solución:

    render() {
    const rows = [];
    for(let i = 0; i<9; i=i+3) {
    const oneRow = [];
    for(let j = i; j < i+3; j++) {
    oneRow.push(this.renderSquare(j, j))
    }
    rows.push(<div className="board-row" key={i + 'someId'}>{oneRow}</div>)
    }
    return (
    <div>
    {rows}
    </div>
    );
    }

    Donde he cambiado renderSquare para establecer una clave para la Plaza de componentes, como el segundo argumento.

    renderSquare(i, key) {
    return (
    <Square
    value={this.props.squares[i]}
    onClick={() => this.props.onClick(i)}
    key={key}
    />
    );
    }
  7. 0

    Esto debería resolver el problema de su frente.

    Esto añade otro bucle incluso para el pasante renderSquare(i) de la función.
    Ella hace lo que quiere, es decir, pantalla de 3 columnas con 3 celdas para el tic tac toe juego.

     render() {
    let count = 0;
    const index = [1, 2, 3];
    return (
    <div>
    {index.map((v, i) => {
    return (
    <div key={i} className="board-row">
    {index.map((v2, i2) => {
    return this.renderSquare(count++);
    })}
    </div>
    );
    })}
    </div>
    );
    }
  8. 0

    La primera solución:

    import React from 'react';
    import Square from './Square';
    export default
    class Board extends React.Component {
    render() {
    const board2 = [];
    for (let i = 0; i < 3; i++) {
    const s = [];
    for (let k = 0; k < 3; k++) {
    s[k] = <Square
    key     ={3*i+k}
    value   ={this.props.squares[3*i+k]}
    onClick ={()=>this.props.onClick(3*i+k)}
    />;
    }
    board2[i] = <div className="board-row" key={i}>{s}</div>;
    }
    ///////////////////////////////////////
    return (
    <div>{board2}</div>
    );
    }
    }

    La segunda solución:

    import React from 'react';
    import Square from './Square';
    export default
    class Board extends React.Component {
    render() {    
    let board   =Array(3).fill(null);
    let square  =Array(3).fill(null);
    const x = board.map((b,bIndex)=>{
    return<div className="board-row" key={bIndex}>
    {
    square.map((s, sIndex)=>{
    return <Square
    key     ={3*bIndex+sIndex}
    value   ={this.props.squares[3*bIndex+sIndex]}
    onClick ={()=>this.props.onClick(3*bIndex+sIndex)}
    />;
    })
    }
    </div>;
    });
    ///////////////////////////////////////
    return (
    <div>{x}</div>
    );
    }
    }

    Plaza:

    import React from 'react';
    export default
    function Square(props) {
    console.log('square render')
    return (
    <button className="square" onClick={props.onClick}>
    {props.value}
    </button>
    );
    }
  9. 0

    Voy a suponer que usted está buscando en el Reaccionar ejemplo de este Tutorial.. Como las instrucciones de forma explícita, la idea es hacer dos bucles, no sólo una.

    El primer bucle en este ejemplo se crea el 3 filas. El segundo bucle anidado, crea el 3 columnas necesarias, la devolución de un Cuadrado para cada posición a través de la renderSquare función. Usted puede notar que yo uso los índices de ambos bucles para asignar correctamente el índice correspondiente a la plaza.

    return (
    <div>
    {[0,1,2].map(i => {
    return (
    <div className="board-row">
    {[0,1,2].map(j => {
    return this.renderSquare(3*i + j)
    })}
    </div>
    );
    })}
    </div>
    );
    • Por favor, puedes añadir alguna explicación? Gracias.
    • Lo siento, @Sanyash. Déjame saber si debo extenderme más.

Dejar respuesta

Please enter your comment!
Please enter your name here