时间戳

首页 > 解决方案 > 警告：validateDOMNesting(...)：

不能作为使用 React-bootstrap 的孩子出现

javascript - 警告：validateDOMNesting(...)：
不能作为使用 React-bootstrap 的孩子出现

问题描述

我有这个代码。这和更多在方法的return声明中render()

<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-bootstrap中的Table组件。

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

标签： javascriptreactjsreact-bootstrapreact-bootstrap-table

解决方案

divReact Bootstrap在添加响应属性时会生成一个表格。为避免此警告（注意，不是阻塞错误），您可以将Table组件包装在td.

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

推荐阅读