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,
  )

故事书中未显示的模式

0 个答案: