バグを説明する
ReactDOM.createPortalによって作成されたモーダルコンポーネントのストーリーを追加したいと思います。
モーダルコンテナは、index.htmlに私が追加した<div id="modal-root"></div>
です。
しかし、私がこのような物語を書くとき:
storiesOf('atoms/modal', module)
.addDecorator(withKnobs)
.add('Modal', () => (
<Modal
isOpen={true}
onRequestClose={action('onRequestClose')}
>
<div>modal</div>
</Modal>
))
「ターゲットコンテナはDOM要素ではありません」エラーが発生しました。
Storybook UIにモーダルルートdivがないためだと思いますか?
どうすれば修正できますか?
再現するには
上記を参照
スクリーンショット
コードスニペット
これは私のモーダルコードです。
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)
}
}
システム:
const modalRoot = document.getElementById('modal-root')
は静的に呼び出されるため、 Modal
コンポーネントをインポートする前に、 <div id="modal-root">
を生成する必要があります。 ストーリーをロードする前に、このdivをconfig.js
で作成することをお勧めします。
このようなもの:
// config.js
const modalRoot = document.createElement('div');
modalRoot.setAttribute('id', 'modal-root');
document.body.append(modalRoot);
@ igor-dvご提案ありがとうございます。
最も参考になるコメント
const modalRoot = document.getElementById('modal-root')
は静的に呼び出されるため、Modal
コンポーネントをインポートする前に、<div id="modal-root">
を生成する必要があります。 ストーリーをロードする前に、このdivをconfig.js
で作成することをお勧めします。このようなもの: