在React中关闭链接单击的DropDown的最佳实践是什么？

Question

我有以下代码：Link to Sandbox

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import "./styles.css";

function DropDown({ close }) {
  return (
    <ul>
      <li>
        <Link to="/" onClick={close}>
          Page 1
        </Link>
      </li>
      <li>
        <Link to="/page2" onClick={close}>
          Page 2
        </Link>
      </li>
      <li>
        <p>Dont hide dropdown when clicking me!</p>
      </li>
    </ul>
  );
}

function Header() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(prev => !prev)}>Toggle DropDown</button>
      {isOpen && <DropDown close={() => setIsOpen(false)} />}
    </div>
  );
}

function Page1() {
  return <h1>Page 1</h1>;
}

function Page2() {
  return <h1>Page 2</h1>;
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Switch>
          <Route exact path="/" component={Page1} />
          <Route path="/page2" component={Page2} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何在不始终将close回调向下传递到下拉菜单中的每个链接的情况下实现此功能？

[我正在尝试使用一个侦听mousedown的钩子来实现这一点，并检查它是否在下拉列表中，然后单击A型，但问题是，在响应重定向到路由之前，它会关闭下拉列表。 >

我已经用useClickAway钩子覆盖了外部的单击，但是我也需要用到useClickInsideOnLink钩子。

我有以下代码：链接到沙盒导入React，{useState}来自“ react”；从“ react-dom”导入ReactDOM；从“ react-router-dom”导入{BrowserRouter，Route，Switch，Link}；导入“。/ ...

Answer 1

您可以在DropDown组件内部创建一个内部组件，并默认使用close功能，还可以通过rest parameter传递其他道具。像这样的东西：

Answer 2

我认为您（至少）有两个选择：