如何正确包装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>

编辑：React 16+

从React 16开始，您现在可以使用片段。

你现在就这样做

return <>
    <li></li>
    <li></li>
<>;

或者，您可以使用<React.Fragment>，它<>是HTML片段的简写，它基本上只是充当容器的临时父元素，一旦将其附加到文档中就不再存在。

https://reactjs.org/docs/fragments.html

https://developer.mozilla.org/zh-
CN/docs/Web/API/DocumentFragment