Storybook: Kesalahan 「Penampung target bukanlah elemen DOM」 terjadi saat menggunakan metode ReactDOM.createPortal

Dibuat pada 29 Okt 2018  ·  2Komentar  ·  Sumber: storybookjs/storybook

Jelaskan bugnya
Saya ingin menambahkan cerita tentang komponen Modal saya yang dibuat oleh ReactDOM.createPortal.
wadah modal adalah <div id="modal-root"></div> ditambahkan oleh saya di index.html.
tapi ketika saya menulis cerita seperti ini:

storiesOf('atoms/modal', module)
  .addDecorator(withKnobs)
  .add('Modal', () => (
    <Modal
      isOpen={true}
      onRequestClose={action('onRequestClose')}
    >
      <div>modal</div>
    </Modal>
  ))

Terjadi kesalahan 「Penampung target bukan elemen DOM」.

Saya pikir itu karena tidak ada div modal-root di Storybook UI?
Bagaimana cara memperbaikinya?

Untuk Mereproduksi
Lihat di atas

Screenshot
2018-10-29 15 17 08

Potongan kode
ini adalah kode Modal saya singkatnya:

const modalRoot = document.getElementById('modal-root')

class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }

  componentDidMount() {
    modalRoot.appendChild(this.el)
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el)
  }

  handleClickBackDrop = event => {
   this.props.onRequestClose(event)
  }

  render() {
    const { isOpen, children } = this.props

    if (!isOpen) {
      return null
    }

    const modalUI = (
      <BackDropWrapper
        onClick={this.handleClickBackDrop}
      >
        <ModalWrapper>
          {children}
        </ModalWrapper>
      </BackDropWrapper>
    )

    return ReactDOM.createPortal(modalUI, modalRoot)
  }
}

Sistem:

  • Kerangka: bereaksi
  • Addons: kenop addon
  • Versi: 4.0.0-alpha.3
react question / support

Komentar yang paling membantu

Karena const modalRoot = document.getElementById('modal-root') dipanggil secara statis, Anda perlu membuat <div id="modal-root"> sebelum komponen Modal diimpor. Saya dapat menyarankan untuk membuat div ini di config.js sebelum memuat cerita.

Sesuatu seperti ini:

// config.js
const modalRoot = document.createElement('div');
modalRoot.setAttribute('id', 'modal-root');
document.body.append(modalRoot);

Semua 2 komentar

Karena const modalRoot = document.getElementById('modal-root') dipanggil secara statis, Anda perlu membuat <div id="modal-root"> sebelum komponen Modal diimpor. Saya dapat menyarankan untuk membuat div ini di config.js sebelum memuat cerita.

Sesuatu seperti ini:

// config.js
const modalRoot = document.createElement('div');
modalRoot.setAttribute('id', 'modal-root');
document.body.append(modalRoot);

@ igor-dv Terima kasih saran Anda berhasil.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat