Question

我使用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>

点击一行后，我

错误：不变违规：findComponentRoot（...，   .0.2.0.0.0.0.0.0.1.0.1.0.0）：无法找到元素。这可能   通常意味着DOM意外地突变（例如，通过浏览器）   由于忘记了使用表格时的嵌套标签   ，

，或者，在父级中使用非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完全搞砸了。发生了什么事？

Answer 1

<Link>呈现<a>元素，但a <tr> element only accepts <th> or <td> elements as children。

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

您的浏览器会自动尝试修复您的HTML。当DOM结构与其期望不符时，React会意识到这种行为。正如错误所指出的，这通常在您的render方法中输出无效的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>

不变违规：使用Link＆amp; amp;时的findComponentRoot表

1 个答案: