React <div>不能作为警告的子项出现

Question

我在React组件中收到以下警告：

相关代码如下：

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap'; 

const MyComponent = (params) => {

function onSelect(event) {
    params.onSelect(event, params.data.id);
}

return (
    <tr key={params.data.id}>
        {params.isSelectable ? (
            <Checkbox onChange={onSelect}>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </Checkbox>
        ) : (
            <div>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </div>
        )}
    </tr>
);

};

如果删除div标签，我会收到以下错误：

  

相邻的JSX元素必须包含在封闭标记中

我是React的新手，所以我不太清楚这里发生了什么。问题是什么？我该如何解决？

更新：我的React版本是15.3.2。

Answer 1

您的代码存在两个问题

1. 在tr
中只允许使用td和th

2. 在React版本＆lt; 15，当你尝试渲染它们时，你必须在一个元素中包装标记。在React 16，中，您现在可以执行以下操作：

   [
     <td key={1}>{params.data.firstName}&nbsp;</td>,
     <td key={2}>{params.data.lastName}&nbsp;</td>
   ]
   

   而不是将td包裹在div

中

我还建议您在tr

之外提取逻辑

Answer 2

如果你需要返回几个元素并且不能有一个包装器（例如在这种情况下），你有一个新的选项，从React 16.2开始。 Fragments：

<>
  <td>{params.data.firstName}&nbsp;</td>
  <td>{params.data.lastName}&nbsp;</td>
</>

看起来像空标签的东西就是这里的碎片。这样，您可以在没有包装元素的情况下返回多个元素，而<td>将是您<tr>的直接子元素。