javascript - 警告 : validateDOMNesting(. ..): 不能作为 的子项出现，使用 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来自 react-bootstrap 的组件.

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

Answer 1

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

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