在 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 (<><textstyle={{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 集成。