Question

我有这个代码。 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。

我正在使用Table中的react-bootstrap组件。

此代码在浏览器中看起来不错，并且似乎可以正常工作，但该错误只是令人讨厌的。我该怎么解决？

Answer 1

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

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

警告：validateDOMNesting（...）：<div>不能作为使用React-bootstrap的子代出现

1 个答案: