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

Question

我有这个代码。这和更多在 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。

我正在使用 Table component from react-bootstrap。

这段代码在浏览器中看起来没问题，似乎也能工作，但这个错误让人恼火。我该如何解决？

Answer 1

React Bootstrap 在添加响应属性时以 div 的形式生成 Table。为避免此警告（注意，不是阻塞错误），您可以将 Table 组件包装在 td.

中

或者，如果您愿意，可以围绕 React Bootstrap 的 Table 编写一个包装器，以确保它在响应式属性被传递时被 td 包围英寸

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

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr> using React-bootstrap

javascript

reactjs

react-bootstrap

react-bootstrap-table