问题标签 [recoiljs]

我有一个关于后坐力的问题。在我的应用程序中有几个屏幕。有很多文本组件。我现在正在做黑暗模式，我尝试为此使用后坐力。我有 atom isDarkMode，它可以是假的或真的。这儿存在一个问题。需要在 style => {isDarkMode 中检查每个 Text 组件（所有应用程序大约有 50 个）？黑暗模式风格：光模式风格}。在所有文本组件中，我需要在黑暗模式中具有相同的样式......现在我只需在每个 TextComponent 中重复此操作。是否以更智能的方式管理此问题，以避免重复？我的意思是像从父母那里传递这种风格或类似的东西？还是我只需要像现在这样？

我有开关设置，所以如果这个开关是真的我想要暗模式，如果是假我想要亮模式。那么除了在每个文本组件中检查此开关状态是真还是假之外，还有其他方法吗？现在我有这样的东西

等等，如果我能够同时管理所有文本，那么在几个屏幕上还有很多其他文本组合？我的意思是避免在每个组合中写这个“{isDarkMode ? darkModeStyles: lightModeStyles}”。如果没有，也许可以通过某种方式缩短此条款

这是我拥有的复杂数据结构的简化版本：

为了利用反冲的力量，我将结构分解为不同的原子族，并通过唯一的 ID 将它们链接起来：

但是像这样打破结构会给代码增加很多复杂性。例如，当我todo向列表中添加一个新元素时，我必须遍历列表tags并创建标记原子。

同样，当我删除 a 时，todo我必须遍历所有内部tag原子并将它们也删除。嵌套越深，这就越复杂。

有没有像这样雾化深度嵌套结构的最佳实践？

我在我的反应项目中使用 Recoil (recoiljs.org)。

我有一个带有项目列表的相当经典的设置 - 对象图看起来像这样：

我使用一个原子来表示当前选择的 Routes 数组，例如

const [routes, setRoutes] = useRecoilValue(currentRoutesViewState);

而且我还使用 aselectorFamily来允许单个控件绑定到单个项目并更新其状态。

如您所见，该set功能允许某人更新单个路由状态，并将其复制到任何渲染路由中。

但是，我想自动保存对整个图表的任何更改，但不知道如何轻松观察对 Routes 父对象的任何更改。有没有办法以编程方式订阅更新，以便我可以序列化并保存此状态？

使用Recoil.jsatom()时，通过处理包含键（字符串）的对象来创建原子：

atom()稍后可以通过将返回的东西交给类似 useRecoilState的东西来获取值（和一个 setter） ：

我需要首先使用创建原子很好，atom()但之后我很想使用字符串键获取值（和设置器）。我在想象这样的事情：

这样做的用例是，我可以在有意义的地方（即层次结构的更高层）创建所有原子（和选择器），然后让组件访问该状态，而不必包含最初创建的文件中的原子他们。

是否可以使用键（字符串/文本）来获取 Recoil 原子/选择器的值/设置器函数，而不必处理useRecoilState()（等）从返回的东西atom()？

当反应反冲中的id不匹配时，我想向对象数组添加一个新对象

对象{id：1，数量：1，产品名称：'apple'}

我在我的 React 项目中使用 Recoil，并且非常喜欢它。我熟悉原子、原子族、选择器和选择器族的概念。但是，我正在努力研究如何将这些项目组合在一起以创建规范的主从 UI 以响应高效渲染。

想象一下，我们在左边有一个 Foos 列表。

任何时候都有一个当前选定的 Foo（或没有选定的 Foo）。当我编辑 Foo 时，我希望列表详细信息也实时更新，但不重新绘制左侧的整个列表。

我尝试了许多原子、选择器和族的组合，但最终我总是重新绘制一切。

此外，假设 UI 允许您添加新的 Foos。

希望您对如何使用 Recoil 进行规范地进行创作的想法。

在控制台中检查结果很好，但是如果在 setCart 中替换该数组，它不会发生，RecoilJS

对象是 { id:4, productName:'Grapes',price:69,quantity:1}

我正在创建一个购物车，在 Click 上传递一个对象，如果购物车为空，则添加该对象，

如果现有对象增加数量

数据：

代码

如果我获取动态数据，如何在不违反钩子规则的情况下将其放入 atomFamily 中？useSetRecoilState需要我传入atomFamily(someIndex)，但是对于动态数据，我在获取数据someIndex之前没有。所以看起来我应该有，但这违反了钩子规则。const setterFactory = someKey => useSetRecoilState(useAtomFamily(someKey))

例子：

假设我有一个附带类型的 API 响应（和反冲 atomFamily）

所以如果我有一个自定义钩子，

我正在尝试重建 Recoiljs 以在 IE 11 上使用它。https://github.com/facebookexperimental/Recoil

为了转换我的代码，我添加@babel/preset-env了我的rollup.config.js.

现在，我注意到了一些奇怪的事情。代码转换没有任何麻烦，但是当我打开输出 cjs 文件时，引用的位置Recoil_atom更改为如下所示。基本上，它不起作用。

正确编译后，它会编译到下面

现在，我发现了一个有点奇怪的解决方法。与其提供其他预设，不如提供@babel/preset-env另一个 babel 选项来解决这个问题。

它有效，但我完全不明白为什么。有什么帮助吗？