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
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:
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.
Komentar yang paling membantu
Karena
const modalRoot = document.getElementById('modal-root')
dipanggil secara statis, Anda perlu membuat<div id="modal-root">
sebelum komponenModal
diimpor. Saya dapat menyarankan untuk membuat div ini diconfig.js
sebelum memuat cerita.Sesuatu seperti ini: