因此,我想创造一个弹出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>
);
}
我尝试过更改样式,以使显示“隐藏”和“阻止”,但是这不起作用,因为它没有显示动画,而只是弹出幻灯片。此外,例如,如果我尝试单独操作此操作,例如,在画布内创建一个click事件,以使div带有react-spring;如果我尝试使用退出按钮,则click事件不再起作用。
这是我的沙箱,用于显示正在发生的事情。 :(对不起,如果这一切看起来令人困惑) 代码位于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
答案 0 :(得分: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之类的东西将状态/动作传递到组件中。
希望这会有所帮助??