JotaiJotai

状態
Primitive and flexible state management for React

在 Render 中初始化 Atom State

有时您需要创建一个使用原子的可重用组件。

这些原子的初始状态由传递给组件的 props 决定。

下面是一个基本示例,说明如何使用 Provider 及其属性 initialValues 来初始化状态。

基本示例

CodeSandbox 链接:codesandbox

考虑一个基本示例,其中您有一个可重用的 TextDisplay 组件,允许您显示和更新纯文本。

该组件有两个子组件,PrettyTextUpdateTextInput

  • PrettyText 以蓝色显示文本。
  • UpdateTextInput 是一个更新文本值的输入字段。

与在两个子组件中将 text 作为 prop 传递相反,您决定 text 状态应该作为一个原子在组件之间共享。

为了使 TextDisplay 组件可重用,我们采用了一个属性 initialTextValue ,它确定了 text 原子的初始状态。

为了将 initialTextValue 绑定到 textAtom,我们将子组件包装在 Provider 中。 然后,我们用初始值填充原子元组的 initialValues 数组。

const textAtom = atom("");
const PrettyText = () => {
const [text] = useAtom(textAtom);
return (
<>
<text
style={{
color: "blue",
}}
>
{text}
</text>
</>
);
};
const UpdateTextInput = () => {
const [text, setText] = useAtom(textAtom);
const handleInputChange = (e) => {
setText(e.target.value);
};
return (
<>
<input onChange={handleInputChange} value={text} />
</>
);
};
export const TextDisplay = ({ initialTextValue }) => {
return (
// 在此处使用渲染 prop 初始化状态
<Provider initialValues={[[textAtom, initialTextValue]]}>
<PrettyText />
<br />
<UpdateTextInput />
</Provider>
);
};

现在,我们可以轻松地使用不同的初始文本值重新生成 TextDisplay 组件,尽管它们引用了“相同”的原子。

export default function App() {
return (
<div className="App">
<TextDisplay initialTextValue="initial text value 1" />
<TextDisplay initialTextValue="initial text value 2" />
</div>
);
}

此行为是由于我们的子组件寻找最低的公共 Provider 祖先来派生其值。

有关 Provider 行为的更多信息,请阅读文档 此处

对于更复杂的用例,请查看 Molecules 集成