7

ポータルを使用してモーダルをレンダリングしようとしています。アプリケーションと Storybook では問題なく動作しますが、Storyshots に追加するとすぐに問題が発生します。

最初の問題は、ReactDOM の createPortal API をモックすることでした。私はそれを次のようにしました：

ReactDOM.createPortal = element => element;

これが追加されていない場合、次のエラーが発生します。

エラー: Uncaught [TypeError: parentInstance.children.indexOf は関数ではありません]

このソリューションReact Portal Errorを見つけました。

これでこの問題は解決しますが、コンポーネントがポータルを使用すると、子を追加しようとすると失敗します。「modal-root」コンポーネントが見つからないため、要素を追加できません。どうすればこれを乗り越えられるかわかりません。

私のポータルは、React Web サイトの例とほとんど同じに見えます。

import React from 'react';
import { createPortal } from 'react-dom';
import { node } from 'prop-types';

class Portal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // !!!!!!!fails here !!!!!!!!!
    document.getElementById('modal-root').appendChild(this.el);
  }

  componentWillUnmount() {
    document.getElementById('modal-root').removeChild(this.el);
  }

  render() {
    return createPortal(this.props.children, this.el);
  }
}

次のエラーで失敗するようになりました。

エラー: キャッチされていません [TypeError: null のプロパティ 'appendChild' を読み取れません]

上記のコード スニペットに示されている位置。

4

3 に答える 3

5

次の 2 つのことを行うことができます。

.storybook新しい DOM 要素を追加します。

let modalRoot = document.createElement("div")
modalRoot.setAttribute("id", "modal-root")
document.querySelector("body")!.appendChild(modalRoot)

また、ドキュメントをモックすることもできます。これは、存在しない dom 要素を見つけようとしていることが問題であるためです。

于 2020-03-03T08:44:16.360 に答える