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

【问题标题】：React <div> cannot appear as a child of <tr> WarningReact <div> 不能作为 <tr> 的子项出现警告
【发布时间】：2018-06-03 07:40:09
【问题描述】：

我在 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。

【问题讨论】：

Divs 作为表格行的子项是无效的 HTML。只有表格标题或表格单元格可以是行的子级。
<td> 仅属于 <tr> 内部。线索就在问题中。此外，<div> 应该在 <td> 或 <th> 内（如果需要在表格内容内）
显示您的Checkbox 组件...尝试复制您的问题here
@DhavalJardosh 我的 Checkbox 组件来自“react-bootstrap”库。我没有创建它。
This 是你在说的，对吧？

标签： javascript html reactjs

【解决方案1】：

你的代码有两个问题

tr 内只允许使用 td 和 th

~~在 React 版本您现在可以执行以下操作：~~

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

而不是将 tds 包装在 div 中

我还建议您在 tr 之外提取您的逻辑

【讨论】：

我可以在 React 版本 15.3.2 中执行此操作吗？

【解决方案2】：

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

<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> 的直接子代。

【讨论】：

我不能这样做，因为我的 React 版本是 15.3.2。
或者如果你没有那个编译配置设置来识别和 > 你可以更明确地这样做：<React.Fragment> ... </React.Fragment>