警告:validateDOMNesting(...): <div> 不能显示为<tr>使用 React-bootstrap 的子项



我有这段代码。这一点以及更多内容在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>

这个错误代码:

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)

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

我正在使用react引导程序中的Table组件。

这段代码在浏览器中看起来还可以,而且似乎可以工作,但错误只是令人恼火。我该如何解决?

React Bootstrap在添加响应属性时生成div形式的表。为了避免此警告(注意,不是阻塞错误(,可以将Table组件封装在td中。

或者,如果你愿意,你可以在React Bootstrap的表周围写一个包装器,以确保如果传入响应属性,它会被td包围

最新更新