不变量冲突:使用Link &表

Invariant Violation: findComponentRoot when using Link & Tables

本文关键字：Link 使用 冲突 不变量      更新时间：2023-09-26

我使用react-router为我的路由。我有一个表，我希望行是可点击的。

所以我有:

<table className="table table-hover table-bordered" cellSpacing="0" width="100%">
<thead>
<tr>
    <th>ID</th>
    <th>GUID</th>
    <th>Patch Name</th>
    <th>Description</th>
    <th>Creation Date</th>
</tr>
</thead>
<tbody>
{patches.map(function (patch) {
    return (
        <tr className="cursor-pointer">
            <Link to="patch" params={{patchId:patch.id}}>
                <td>{patch.id}</td>
                <td>{patch.guid}</td>
                <td>{patch.name}</td>
                <td>{patch.description}</td>
                <td>{moment(patch.creation_date).format('MMMM Do YYYY')}</td>
            </Link>
        </tr>
    );
})}
</tbody>
</table>

单击一行后，得到

Error: Invariant Violation: findComponentRoot(…，.0.2.0.0.0.0.0.0.1.0.1.0.0):无法找到元素。这可能通常表示DOM被意外地改变了(例如，由浏览器)由于在使用表时忘记了a，嵌套标签如、

、或，或在父元素中使用非svg元素。试一试查看React ID为' '的元素的子节点。

如果我将<Link>移动到<tr>之前，即:

<Link to="patch" params={{patchId:patch.id}}>
    <tr className="cursor-pointer">
        <td>{patch.id}</td>
        <td>{patch.guid}</td>
        <td>{patch.name}</td>
        <td>{patch.description}</td>
        <td>{moment(patch.creation_date).format('MMMM Do YYYY')}</td>
    </tr>
</Link>

那么它工作得很好，但表CSS完全混乱。这是怎么呢

<Link>呈现<a>元素，但<tr>元素只接受<th>或<td>元素作为子元素。

对于<tbody>和<table>也是如此，它们只接受HTML元素的子集作为子元素。

你的浏览器会自动修复你的HTML。React不知道这种行为，当DOM结构与预期不匹配时，会抛出错误。正如错误所指出的，这通常发生在在呈现方法中输出无效的HTML结构时。

如果你想让整个<tr>作为一个链接，你应该在每个表格单元格中呈现一个链接。

<tr className="cursor-pointer">
    <td>
        <Link to="patch" params={{patchId:patch.id}}>
            {patch.id}
        </Link>
    </td>
    <td>
        <Link to="patch" params={{patchId:patch.id}}>
            {patch.guid}
        </Link>
    </td>
    {/* etc */}
</tr>
相关文章：