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

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 版本 < 15 中，当您尝试渲染标签时，必须将标签包装在一个元素中。在 React 16 中，您现在可以执行以下操作：

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

   而不是将tds 包裹在 a 内div

我还建议你将你的逻辑提取出来tr

Answer 2

如果您需要返回多个元素并且无法使用包装器（例如在本例中），则从 React 16.2 开始您有一个新选项。片段：

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

或者，您也许可以将其简化为：

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

这些片段不会解析为任何 HTML 元素，因此<td>s 将是<tr>.