reactjs – 如何正确包装一些TD标签JSXTransformer?

前端之家收集整理的这篇文章主要介绍了reactjs – 如何正确包装一些TD标签JSXTransformer?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个数组的项目,我想做这样的东西:
  1. <tr>
  2. (until have items in array
  3. <td></td><td></td>)
  4. </tr>

但如果我这样做,我得到一个JSXTransformer错误

Adjacent XJS elements must be wrapped in an enclosing tag

工作版本:

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

我试过这个。但使用< div>封装标签它不工作正常。

回答这里:
Uncaught Error: Invariant Violation: findComponentRoot(…,…$110): Unable to find element. This probably means the DOM was unexpectedly mutated

  1. <tbody>
  2. {rows.map(function (rowElement){
  3. return (<tr key={trKey++}>
  4. {rowElement.row.map(function(ball){
  5. console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
  6. return(<div key={divKey++}>
  7. <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
  8. </div>);
  9. })}
  10. </tr>);
  11. })}
  12. </tbody>

Please,advise me how to properly wrap few TD tags!
I tried use a guide 07001,but JSXTransformer doesn’t allow me do that.

所以你有成对的< td>要从.map返回的元素。最简单的方法是将它们包装在数组中。
  1. <tr>
  2. {data.map(function(x,i){
  3. return [
  4. <td>{x[0]}</td>,<td>{x[1]}</td>
  5. ];
  6. })}
  7. </tr>

不要忘记第一个< / td>之后的逗号。

猜你在找的React相关文章