javascript - React 中 元素上的 anchor 标记行为

Question

我正在创建一个 React 应用程序，其组件如下所示:

class TableRow extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        const handleClick = () => window.location.href = "some-url";

        return (
            <tr>
                <td>Something 1</td>
                <td>Something 2</td>
                <td>Something 3</td>
                <td>Something 4</td>
            </tr>
        );
    }
}

我希望 <tr> 标签的行为类似于 <a> 标签，您可以:

1. 点击它并让它转到“some-url”
2. 按住命令并单击它，让它转到“some-url”，但在新选项卡中

场景 1 很简单，因为我可以将 onClick 属性添加到 <tr> 上，但是当您尝试使用命令+单击它时，它不会在一个新标签。

我不想将整个组件包装在 <a> 标记中，因为 React 会抛出警告，指出 <tbody> 标记不应包含 <a> 标记为子级。我也不想将所有 <td> 标签包装在一个 <a> 标签下，因为会引发类似的警告。

Answer 1

尚未尝试过 react ，但我尝试仅用 javascript 解决您的问题。

看看这个 Fiddle

//delegate click events on the table
document.getElementById("table-with-anchors").addEventListener("click", function(e){
  //check if the targeted tr is set to be as an anchor
  if (e.target && e.target.parentElement.classList.contains("tr-as-anchor")) {
    //Do your stuffs here.
    window.open('', '_blank');
  }
  else {
    alert("You selected tr without anchor");
  }
});