Storybook: ReactDOM.createPortalメソッドを使用すると「ターゲットコンテナはDOM要素ではありません」エラーが発生しました

作成日 2018年10月29日  ·  2コメント  ·  ソース: storybookjs/storybook

バグを説明する
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がないためだと思いますか?
どうすれば修正できますか?

再現するには
上記を参照

スクリーンショット
2018-10-29 15 17 08

コードスニペット
これは私のモーダルコードです。

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)
  }
}

システム:

  • フレームワーク:反応する
  • アドオン:アドオンノブ
  • バージョン:4.0.0-alpha.3
react question / support

最も参考になるコメント

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);

全てのコメント2件

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ご提案ありがとうございます。

このページは役に立ちましたか?
0 / 5 - 0 評価