javascript - 不变违规:使用链接和表时为findComponentRoot

我正在使用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完全混乱了。这是怎么回事？

最佳答案

<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>