Descreva o bug
Eu gostaria de adicionar uma história do meu componente modal que é feito por ReactDOM.createPortal.
o contêiner modal é <div id="modal-root"></div>
adicionado por mim em index.html.
mas quando escrevo uma história assim:
storiesOf('atoms/modal', module)
.addDecorator(withKnobs)
.add('Modal', () => (
<Modal
isOpen={true}
onRequestClose={action('onRequestClose')}
>
<div>modal</div>
</Modal>
))
「O container de destino não é um elemento DOM」 ocorreu um erro.
Acho que é porque não há div raiz modal na interface do usuário do Storybook?
Como posso corrigir isso?
Reproduzir
Veja acima
Capturas de tela
Partes de codigo
este é o meu código modal para abreviar:
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)
}
}
Sistema:
Como const modalRoot = document.getElementById('modal-root')
é chamado estaticamente, você precisa gerar <div id="modal-root">
antes que o componente Modal
seja importado. Posso sugerir a criação deste div em config.js
antes de carregar as histórias.
Algo assim:
// config.js
const modalRoot = document.createElement('div');
modalRoot.setAttribute('id', 'modal-root');
document.body.append(modalRoot);
@ igor-dv Obrigado sua sugestão funcionou.
Comentários muito úteis
Como
const modalRoot = document.getElementById('modal-root')
é chamado estaticamente, você precisa gerar<div id="modal-root">
antes que o componenteModal
seja importado. Posso sugerir a criação deste div emconfig.js
antes de carregar as histórias.Algo assim: