JotaiJotai

状態
Primitive and flexible state management for React

在 Render 中初始化 Atom State

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

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

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

基本示例

CodeSandbox 链接：codesandbox。

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

该组件有两个子组件，PrettyText 和 UpdateTextInput。

  • 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 集成。

GitHubnpm