如何解决使用多个组件时如何获得多个反冲原子?
在某些组件中,我使用反冲原子来管理我的状态。一个例子是我的模态组件。它看起来像这样:
export const modalState = atom({
key: "modalState",default: false
})
export const usetoggleModalState = () => {
const setModalState = useSetRecoilState(modalState)
return (state,callback) => {
setModalState(state)
if (callback) {
callback()
}
}
}
export const Modal = (props) => {
<Transition show={modalState}>
<Dialog>
<Dialog.Title>My Modal Headline</Dialog.title>
<Dialog.Description>My Modal Description</Dialog.Description>
</Dialog>
</Transition>
}
我正在使用这种模式:
const toggleModalState = usetoggleModalState();
return (
<Modal />
<Button text="Close Modal" onClick={() => toggleModalState(false)} />
)
然而,如果我多次使用模态,模态会自动复制,但我仍然只对所有模态使用一种状态。当然,我不想那样。如果我多次使用一个组件,我希望多次创建状态,以便我可以单独更改每个组件的状态。
我已经读到还有 atomFamilys。我现在可以使用这些吗?那么我的代码应该是什么样的?如果我多次使用一个组件,是否也可以自动创建多个原子?
解决方法
为什么要为此使用后坐力?模态的状态与模态本身相关,不需要访问全局状态。
您可以仅使用 useState
来确定是否要在组件中显示模态:
export const Modal = (props) => {
<Transition show={props.show}>
<Dialog>
<Dialog.Title>My Modal Headline</Dialog.title>
<Dialog.Description>My Modal Description</Dialog.Description>
</Dialog>
</Transition>
}
export const ComponentWithModal = () => {
const [showModal,setShowModal] = useState(false);
return (
<>
<Modal show={showModal}/>
<Button text="Open Modal" onClick={() => setShowModal(true)} />
<Button text="Close Modal" onClick={() => setShowModal(false)} />
</>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。