如何为JSXTransformer正确包装少量TD标签？

Question

我有一个包含项目的数组,我想做这样的事情:

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

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

相邻的XJS元素必须包装在一个封闭的标签中

工作版本:

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

我试过这个.但是使用<div>封闭标签它不能正常工作.

在这里回答: 未捕获错误:不变违规:findComponentRoot(...,... $ 110):无法找到元素.这可能意味着DOM意外地发生了变异

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

请告诉我如何正确包装少量TD标签! 我尝试使用指南Dynamic Children,但JSXTransformer不允许我这样做.

Answer 1

当您返回多个元素而没有包装元素时,通常会发生以下错误

相邻的XJS元素必须包装在一个封闭的标签中

喜欢

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

这不起作用,因为你实际上返回了两个结果,你只需要返回一个DOM节点(有或没有子节点)

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

// or 

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

我能正确回答你的问题,请你提供一个JSFiddle吗？我试图猜测你正在尝试做什么,这是一个JSFiddle工作.

当使用div作为包装器时,它实际上从未呈现给DOM(不确定为什么).

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

所以你有一对<td>想要从中返回的元素.map.最简单的方法是将它们包装在一个数组中.

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

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