在我的项目中,我使用的是" react-three/fiber ";它需要将所有内容存储在"画布"中。此外,用于存储一些状态并与"canvas"中的其他模块共享。我在用反冲的原子。
所以,inside "RecoilRoot"一切都很好,但我需要显示数据从原子在"ui";组件。
我不能把"RecoilRoot"从"画布"中删除,所以我尝试添加第二个"recoilroot"。现在我可以使用"useRecoilValue"在"UI"),但它只显示默认状态的原子…
我的App.js"看起来像:
function App() {
return (
<Suspense fallback={<Loading />}>
{/*Second RecoilRoot, outside the Canvas*/}
<RecoilRoot>
<Canvas shadows>
<GameSettingsProvider>
{/*Main RecoilRoot with data*/}
<RecoilRoot>
<ObjectShow />
{/*Main RecoilRoot with data*/}
</RecoilRoot>
</GameSettingsProvider>
</Canvas>
<UI />
{/*Second RecoilRoot, outside the Canvas*/}
</RecoilRoot>
</Suspense>
);
}
export default App;
Atom with data:
import {atom} from "recoil";
export const scoreState = atom({
key: "score", // unique ID (with respect to other atoms/selectors)
default: 0, // default value (aka initial value)
});
UI模块:
import React from 'react'
import { useRecoilValue } from 'recoil'
import { scoreState } from './gameState'
function UI() {
const score = useRecoilValue(scoreState);
return (
<div className='score-title'>
<h1 className='score-title__text'>
Score: {score}
</h1>
</div>
)
}
export default UI
那么,我如何在"RecoilRoot"之外使用原子值呢?或者,至少从嵌套的共享?
有两种不同的渲染DOM和Canvas。
找不到任何通过Recoil转移状态的解决方案,所以我使用了Zustand状态管理器进行得分状态。它甚至可以在渲染之间转移状态!
像魅力一样工作