如何正确包装less量的JSXTransformer的TD标签？
我有一个数组与项目，我想这样做：
<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>标签，它不能正常工作。
在这里回答： Uncaught错误：不变违规：findComponentRoot（…，… $ 110）：无法find元素。 这可能意味着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>
请告诉我如何正确包装less量的TD标签！ 我试过使用dynamic儿童指南，但JSXTransformer不允许我这样做。
所以你有一对要从.map返回的<td>元素。 最简单的方法就是将它们包装在一个数组中。
<tr> {data.map(function(x, i){ return [ <td>{x[0]}</td>, <td>{x[1]}</td> ]; })} </tr>
不要忘记第一个</td>之后的逗号。
当您返回没有包装元素的多个元素时，通常会发生以下错误
相邻的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>
这是你将如何做到这一点
<tbody> {this.props.rows.map((row, i) => <tr key={i}> {row.map((col, j) => <td key={j}>{col}</td> )} </tr> )} </tbody>
