0

所以我想创建一个弹出 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>

  );
}

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

这是我的沙箱，用于显示正在发生的事情。：（如果这一切看起来令人困惑，请抱歉）代码在 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

4

1 回答 1

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之类的东西将状态/操作传递到您的组件中。

希望这会有所帮助

于 2020-04-20T15:57:59.077 回答