reactjs - simple - react tutorial

¿Cómo envolver correctamente algunas etiquetas TD para JSXTransformer?

Question

Tengo una matriz con elementos y quiero hacer algo como esto:

<tr>
(until have items in array
<td></td><td></td>)
</tr>

Pero si hago eso, obtengo un error JSXTransformer:

Los elementos XJS adyacentes deben estar envueltos en una etiqueta adjunta

Versión de trabajo:

{rows.map(function (rowElement){
    return (<tr key={trKey++}>
        <td className=''info'' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td>
        <td className=''info'' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td>
        <td className=''info'' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td>
        <td className=''info'' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td>
        <td className=''info'' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td>
                 .......
        </tr>);
})}

Intenté este. Pero con la <div> encierra, no funciona bien.

Responda aquí: Error no detectado: violación invariable: findComponentRoot (..., ... $ 110): no se puede encontrar el elemento. Esto probablemente significa que el DOM se mutó inesperadamente

<tbody>
    {rows.map(function (rowElement){
        return (<tr key={trKey++}>
        {rowElement.row.map(function(ball){
            console.log(''trKey:''+trKey+'' td1stKey''+td1stKey+'' ball.value:''+ball.value+'' td2ndKey:''+td2ndKey+'' ball.count:''+ball.count);
            return(<div key={divKey++}>
                <td className=''info'' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
            </div>);
        })}
        </tr>);
    })}
</tbody>

¡Por favor, avísenme cómo ajustar adecuadamente algunas etiquetas TD! Intenté usar una guía Dynamic Children , pero JSXTransformer no me permite hacer eso.

Answer 1

Así es como lo harás

<tbody>
    {this.props.rows.map((row, i) =>
      <tr key={i}>
        {row.map((col, j) =>
          <td key={j}>{col}</td>
        )}
      </tr>
    )}
</tbody>

Answer 2

Con el lanzamiento de React 16, hay un nuevo componente llamado Fragment . Si desea devolver una colección de elementos / componentes sin tener que envolverlos en un elemento adjunto, puede usar un Fragment como ese:

import { Component, Fragment } from ''react'';

class Foo extends Component {

  render() {
    return (
      <Fragment>
        <div>Hello</div
        <div>Stack</div>
        <div>Overflow</div>
      </Fragment>
    );
  }
}

Answer 3

El siguiente error generalmente ocurre cuando devuelve múltiples elementos sin un elemento de ajuste

Los elementos XJS adyacentes deben estar envueltos en una etiqueta adjunta

Me gusta

return (
    <li></li>
    <li></li>
);

Esto no funciona porque de hecho estás devolviendo dos resultados, solo necesitas devolver un nodo DOM (con o sin hijos) como

return (
    <ul>
        <li></li>
        <li></li>
    </ul>
);

// or 

return (<ul>
    {items.map(function (item) {
        return [<li></li>, <li></li>];
    })}
</ul>);

Para que pueda responder correctamente a su pregunta, ¿podría proporcionar un JSFiddle? Traté de adivinar lo que estás tratando de hacer y aquí hay un JSFiddle de trabajo.

Cuando se utiliza el div como envoltorio, en realidad nunca se representa en el DOM (no estoy seguro de por qué).

<tr data-reactid=".0.0.$1">
    <td class="info" data-reactid=".0.0.$1.$0.0">1</td>
    <td data-reactid=".0.0.$1.$0.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$1.0">1</td>
    <td data-reactid=".0.0.$1.$1.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$2.0">1</td>
    <td data-reactid=".0.0.$1.$2.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$3.0">1</td>
    <td data-reactid=".0.0.$1.$3.1">2</td>
</tr>

Answer 4

Entonces tiene pares de elementos <td> que quiere devolver desde un .map . La forma más fácil de hacerlo es simplemente envolverlos en una matriz.

<tr>
  {data.map(function(x, i){
    return [
      <td>{x[0]}</td>,
      <td>{x[1]}</td>
    ];
  })}
</tr>

No olvides la coma después de la primera </td> .