web-dev-qa-db-fra.com

Comment envelopper correctement quelques balises TD pour JSXTransformer?

J'ai un tableau avec des articles et je veux faire quelque chose comme ça:

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

Mais si je fais cela, j'obtiens une erreur JSXTransformer:

Les éléments XJS adjacents doivent être enveloppés dans une balise englobante

Version de travail:

{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>);
})}

J'ai essayé celui-ci. Mais avec <div> entourant la balise, cela ne fonctionne pas bien.

Répondez ici: erreur non détectée: violation invariante: findComponentRoot (..., ... $ 110): impossible de trouver l'élément. signifie que le DOM a subi une mutation inattendue

<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>

Veuillez m'indiquer comment envelopper correctement quelques TD! J'ai essayé d'utiliser un guide Dynamic Children , mais JSXTransformer ne me permet pas de le faire.

reactjsreact-jsx
52
Eldar Nezametdinov

Vous avez donc des paires de <td> éléments que vous souhaitez renvoyer d'un .map. La façon la plus simple de le faire est de simplement les envelopper dans un tableau.

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

N'oubliez pas la virgule après le premier </td>.

47
Brigand

L'erreur suivante se produit généralement lorsque vous renvoyez plusieurs éléments sans élément d'habillage

Les éléments XJS adjacents doivent être enveloppés dans une balise englobante

Comme

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

Cela ne fonctionne pas car vous renvoyez effectivement deux résultats, vous devez uniquement renvoyer un seul nœud DOM (avec ou sans enfants) comme

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

// or 

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

Pour que je réponde correctement à votre question, pourriez-vous fournir un JSFiddle? J'ai essayé de deviner ce que vous essayez de faire et voici un JSFiddle ça marche.

Lorsque vous utilisez le div comme wrapper, il n'est en fait jamais rendu dans le DOM (vous ne savez pas pourquoi).

<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>
83
Chad Scira

Avec la sortie de React 16, il y a un nouveau composant appelé Fragment . If voudrait retourner une collection d'éléments/composants sans avoir à les envelopper dans un élément englobant, vous pouvez utiliser un Fragment comme ceci:

import { Component, Fragment } from 'react';

class Foo extends Component {

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

Voici comment vous le ferez

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