故事书中未显示模态

Question

我有一个工作模式组件，我也需要在故事书中展示它。显示和关闭取决于道具。例如，如果我需要显示模态，我必须执行以下操作

const Demo = () => {
    const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open Modal</button>
            <Modal open={open} onClose={() => setOpen(false)}>
                <Modal.Header>Modal Header goes here</Modal.Header>
                <Modal.Content>Modal Content goes here</Modal.Content>
                <Modal.Footer>Modal Footer goes here</Modal.Footer>
            </Modal>
        </>
    )
}

我正在使用 ReactDOM.createPortal 来渲染模态，因此为此我创建了一个带有 id 模态的 div 元素，并在其中创建了模态出现的另一个 div 元素。为此，我创建了一个模态故事，如下

storiesOf('Modals', module)
  .addDecorator(storyFn => (
    <>
      <div id="modal">
        <div>{storyFn()}</div>
      </div>
    </>
  ))
  .addDecorator(withKnobs)
  .add('Modals - Basic', () => (
    <>
      <button type="button">Show Modal</button>
      <Modal open={boolean('open', false)}>
        <Modal.Header>Modal Header goes here</Modal.Header>
        <Modal.Content>Modal Content goes here</Modal.Content>
        <Modal.Footer>Modal Footer goes here</Modal.Footer>
      </Modal>
    </>
  ))

我的模态是通过以下方式创建的

const el = document.createElement('div')
const modal = document.getElementById('modal')

return ReactDOM.createPortal(
    <>
      <Backdrop onClick={e => closeModal(e)}>
        <ModalBox>
          <Wrapper position={position} {...props}>
            {children}
            <CloseIcon icon={faTimesCircle} />
          </Wrapper>
        </ModalBox>
      </Backdrop>
    </>,
    el,
  )