获取对RecoilRoot外部的原子值的访问权

Question

在我的项目中，我使用的是" 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"之外使用原子值呢?或者，至少从嵌套的共享?

Answer 1

有两种不同的渲染DOM和Canvas。

找不到任何通过Recoil转移状态的解决方案，所以我使用了Zustand状态管理器进行得分状态。它甚至可以在渲染之间转移状态!

像魅力一样工作