使用 React 处理不同导出的事件

Question

所以我想创建一个弹出窗口 div，它会在选择对象时从侧面滑动，然后在重新选择对象时退出。我还想创建一个也会关闭 div 的退出按钮。除了我想重用这个 div 组件外，我几乎可以理解如何执行此操作，这就是为什么我将它作为导出保存在另一个 javascript 文件中的原因。这就是问题所在，因为我无法处理跨文件的事件。

这是我的代码：

/*Popup div export*/

export default () => {

  const [toggle, set] = useState(true);

  const { xyz } = useSpring({
      from: { xyz: [-1000, 0, 0] },

    xyz: toggle ? [0, 0, 0] : [-1000, 0, 0]
  });

  return (
    <a.div
      style={{
        transform: xyz.interpolate(
          (x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`
        )
      }}
      className="expand"
    >
      <Link to={link}>
        <a.button>Next</a.button>
      </Link>
      <button onClick={() => set(!toggle)}>Exit</button>
    </a.div>
  );
};


/*This is where I am implementing the export*/

      <Canvas>

        <Suspense fallback={<Fallback />}>

          <Cube position={[-1.2, 0, 0]} onClick={e => <Toggle />} /> <---/*Here is the click event where I call the div*/-->

          <Cube position={[1.2, 0, 0]} />
        </Suspense>
      </Canvas>

  );
}

我曾尝试更改样式以显示 'hidden' 和 'block'，但这不起作用，因为它不会在弹出的动画中显示幻灯片。此外，如果我尝试单独操作它，例如，如果我尝试使用退出按钮，则在 canvas 中创建一个单击事件以使 div 与 react-spring 一起出现，点击事件不再起作用。

这是我的沙箱，用于显示正在发生的事情。 : (p.s 对不起，如果这一切看起来很混乱）代码在 Page1.js 和 toggle.js

之间

https://codesandbox.io/s/sad-goldberg-pmb2y?file=/src/toggle.js:250-326

编辑：更简单的沙盒视觉效果： https://codesandbox.io/s/happy-chatelet-vkzjq?file=/src/page2.js

Answer 1

你的例子有点难以理解，一个更简单的复制会更好。就是说，如果我理解总体目标，我认为您想要存储一些全局状态（可能在您的 App.js 组件中），这些状态具有某种关于侧边栏可见的状态。

例如：

function App() {
  const [sidebarVisible, setSidebarVisible] = React.useState(false)

  const toggleSidebar = () => setSidebarVisible(!sidebarVisible)

  return (
    <Router>
      <Switch>
        <Route path="/page1">
          <Page1 toggleSidebar={toggleSidebar} />
        </Route>
        <Route path="/page2">
          <Page2 toggleSidebar={toggleSidebar} />
        </Route>
        <Route path="/">
          <Start toggleSidebar={toggleSidebar} />
        </Route>
      </Switch>
    </Router>
  )
}

function Page1({ toggleSidebar }) {
  return <Toggle toggleSidebar={toggleSidebar} />
}

function Toggle({ toggleSidebar }) {
  return <button onClick={toggleSidebar}>Toggle</button>
}

这只是为了给您一些想法，您当然可以传递 setSidebarVisible 函数或创建另一个函数来存储关于应在边栏上显示的内容的某种状态。

您还可以使用 Redux 或 React Context 之类的东西将 state/actions 传递到您的组件中。

希望这能有所帮助

使用 React 处理不同导出的事件

Handling events across different exports with React

reactjs

react-hooks

react-three-fiber