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

发布时间：2020-12-15 06:57:00 所属栏目：百科来源：网络整理

导读：我有一个数组的项目，我想做这样的东西： tr(until have items in arraytd/tdtd/td)/tr 但如果我这样做，我得到一个JSXTransformer错误： Adjacent XJS elements must be wrapped in an enclosing tag 工作版本： {rows.map(function (rowElement){ return (

我有一个数组的项目，我想做这样的东西：

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

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

Adjacent XJS elements must be wrapped in an enclosing tag

工作版本：

{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 Error: Invariant Violation: findComponentRoot(…,…$110): Unable to find element. This probably means the DOM was unexpectedly mutated

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

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返回的元素。最简单的方法是将它们包装在数组中。

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!