使用多个组件时如何获得多个反冲原子？

问题描述

在某些组件中，我使用反冲原子来管理我的状态。一个例子是我的模态组件。它看起来像这样：

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)} />
    </>
  )
}