Beschreibe den Fehler
Ich möchte eine Geschichte meiner Modal-Komponente hinzufügen, die von ReactDOM.createPortal erstellt wurde.
Der modale Container ist <div id="modal-root"></div>
der von mir in index.html hinzugefügt wurde.
aber wenn ich eine Geschichte wie diese schreibe:
storiesOf('atoms/modal', module)
.addDecorator(withKnobs)
.add('Modal', () => (
<Modal
isOpen={true}
onRequestClose={action('onRequestClose')}
>
<div>modal</div>
</Modal>
))
「Zielcontainer ist kein DOM-Element」 Fehler aufgetreten.
Ich denke, das liegt daran, dass es in der Storybook-Benutzeroberfläche kein Modal-Root-Div gibt.
Wie kann ich es reparieren?
Reproduzieren
siehe oben
Screenshots
Code Ausschnitte
Dies ist kurz mein Modal Code:
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)
}
}
System:
Da die const modalRoot = document.getElementById('modal-root')
statisch aufgerufen wird, müssen Sie die <div id="modal-root">
generieren, bevor die Modal
-Komponente importiert wird. Ich kann vorschlagen, dieses Div in config.js
erstellen, bevor die Geschichten geladen werden.
Etwas wie das:
// config.js
const modalRoot = document.createElement('div');
modalRoot.setAttribute('id', 'modal-root');
document.body.append(modalRoot);
@ igor-dv Vielen Dank, dass Ihr Vorschlag funktioniert hat.
Hilfreichster Kommentar
Da die
const modalRoot = document.getElementById('modal-root')
statisch aufgerufen wird, müssen Sie die<div id="modal-root">
generieren, bevor dieModal
-Komponente importiert wird. Ich kann vorschlagen, dieses Div inconfig.js
erstellen, bevor die Geschichten geladen werden.Etwas wie das: