Javascript 警告：ValidatedMonitoring（…）：<；部门>；不能显示为<；的子级；tr>；使用React引导

我有这个密码。

render（）

方法的

return

语句中有这一点和更多内容

<Table striped bordered condensed hover responsive>
    <thead>
    <tr>
        <th style={{textAlign: 'center'}}>Imie Nazwisko/Nazwa firmy</th>
        <th style={{textAlign: 'center'}}>ID</th>
        <th style={{textAlign: 'center'}}>Raporty</th>
    </tr>
    </thead>
    <tbody>
    {
        this.state.users && this.state.users.map((user, i) => (
            <tr key={user.id}>
                <td>
                    {user.userType === 'person' ? `${user.person.firstName} ${user.person.lastName}` : user.company.name}
                </td>
                <td>{user.id}</td>
                <Table striped bordered hover responsive>
                    <tbody>
                    {
                        user.reports.map(report => (
                            <tr key={report.id}>
                                <td>{report.id}</td>
                            </tr>
                        ))
                    }
                    </tbody>
                </Table>
            </tr>
        ))
    }
    </tbody>
</Table>

伊米·纳兹维斯科/纳兹瓦·菲尔米
身份证件
欣喜若狂
{
this.state.users&&this.state.users.map（（用户，i）=>(
{user.userType=='person'？`${user.person.firstName}${user.person.lastName}`:user.company.name}
{user.id}
{
user.reports.map（报告=>(
{report.id}
))
}
))
}

此错误代码为：

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.
    in div (created by Table)
    in Table (at ReportsComponent.js:59)
    in tr (at ReportsComponent.js:54)
    in tbody (at ReportsComponent.js:51)
    in table (created by Table)
    in div (created by Table)
    in Table (at ReportsComponent.js:43)
    in ReportsComponent (at NavigationComponent.js:67)

警告：validateDOMNesting（…）：不能显示为的子级。
在div中（由表创建）
在表中（位于ReportsComponent.js:59）
在tr中（位于ReportsComponent.js:54）
在tbody中（在ReportsComponent.js:51中）
在表中（由表创建）
在div中（由表创建）
在表中（位于ReportsComponent.js:43）
在ReportsComponent中（位于NavigationComponent.js:67）

所以问题是我不是自己创建div的。我可以看到表正在创建抛出错误的div

我正在使用来自的组件

---

这段代码在浏览器中看起来不错，而且似乎可以正常工作，但这个错误令人恼火。如何解决此问题？

添加响应属性时，React Bootstrap会以

div

的形式生成一个表。要避免此警告（注意，不是阻塞错误），可以将

表

组件包装在

td

中

---

或者，如果您愿意，您可以在React-Bootstrap的表周围编写一个包装器，以确保在传入responsive属性时，它被

td

包围。

您可能希望在将

responsive

道具添加到

React-Bootstrap

表时查看，它们将

表

包装在

div

中，这会导致与您的表发生冲突