javascript - 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 标签，我会收到以下错误:

Adjacent JSX elements must be wrapped in an enclosing tag

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

更新:我的 React 版本是 15.3.2。

Answer 1

如果您需要返回多个元素并且不能有包装器(例如在本例中)，那么从 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> .