javascript - React 中的切换功能

Question

所以一开始我就知道这段代码很乱。我有一个 div我想复制，当我点击 div ，它打开一个内容并复制 div .我似乎无法完成的是，在那个复制的 div/Image 版本中，我可以关闭内容，但是当我再次按下它时，我似乎无法打开组件。如果你不完全理解这里是沙箱https://codesandbox.io/s/confident-lake-uovir?file=/src/App.js

Answer 1

您有 ref在第一 div所以click事件可以通过 handleProject 检查.
单击复制的版本时，会运行 2 个功能。onClick的div触发器 setIsProjectOpen(true) ，然后是 eventListenter您已添加到 useEffect触发器 setIsProjectOpen(false) .
你可以这样做:

        <div
          onClick={(e) => {
            e.stopPropagation();
            setIsProjectOpen(!isProjectOpen)}};
          className={
            "smallProjects__container " + (isProjectOpen ? "active" : "")
          }
        >