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

Question

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

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。我现在可以使用这些吗？那我的代码应该是什么样子？如果我多次使用一个组件，是否也可以自动创建多个原子？

Answer 1

为什么要为此使用反冲？模态的状态与模态本身相关，它不需要访问全局状态。

您可以仅用于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)} />
    </>
  )
}