反应< div>不能显示为< tr>的子级警告 [英] React <div> cannot appear as a child of <tr> Warning

问题描述

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

I am getting the following warnings in a React component:

相关代码如下:

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标签，则会出现以下错误:

If I remove the div tags, I get the following error:

相邻的JSX元素必须包装在一个封闭的标签中

Adjacent JSX elements must be wrapped in an enclosing tag

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

I am new to React, so i am not quite clear on what is going on here. What's the problem and how can I fix it?

更新:我的React版本是15.3.2.

Update: my React version is 15.3.2.

推荐答案

您的代码有两个问题

1. tr内只能输入td和th

2. 在React版本中<如图15所示，当您尝试渲染标签时，必须将标签包装在一个元素中.在React 16中，您现在可以执行以下操作:

1. Only td and th are allowed inside tr

2. In React version < 15, you have to wrap tags in one element, when you try to render them. In React 16, you can now do the following :

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

而不是将td包裹在div

我还建议您在tr

这篇关于反应&lt; div&gt;不能显示为&lt; tr&gt;的子级警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！