Question

我一直在寻找一种解决方案，用于测试运气不高的Portal。安装似乎是用酶进行单元测试时可以使用的解决方案，但是我发现没有一种解决方案对我有用吗？任何帮助将不胜感激。

门户

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import UGCGalleryOverlay from './UGCGalleryOverlay';

const rootElem = document.getElementById('ugc-gallery-overlay');

class UGCGalleryOverlayPortal extends Component {
  constructor(props) {
    super(props);

    this.el = document.createElement('div');
  }

  componentDidMount() {
    rootElem.appendChild(this.el);
  }

  componentWillUnmount() {
    rootElem.removeChild(this.el);
  }

  render() {
    const { onClick, products, source, mainImage } = this.props;

    return ReactDOM.createPortal(
      <UGCGalleryOverlay
        onClick={onClick}
        products={products}
        source={source}
        mainImage={mainImage}
      />
    , rootElem)
    }
};

UGCGalleryOverlayPortal.displayName = 'UGCGalleryOverlayPortal';

UGCGalleryOverlayPortal.propTypes = {
  products: PropTypes.arrayOf(PropTypes.object).isRequired,
  mainImage: PropTypes.string.isRequired,
  source: PropTypes.shape({
    user: PropTypes.shape({
      displayName: PropTypes.string,
      image: PropTypes.shape({
        smallSquare: PropTypes.shape({
          link: PropTypes.string,
        }),
      }),
    }),
  }).isRequired,
  onClick: PropTypes.func.isRequired,
};

export default UGCGalleryOverlayPortal;

Answer 1

我希望您已经找到了解决方案。但是，对于将来寻找答案的人...

您似乎将错误的元素传递给ReactDom.createPortal()。您正在将rootElem传递到门户，但是您应该传递在constructor中创建的元素。

    return ReactDOM.createPortal(
          <UGCGalleryOverlay
            onClick={onClick}
            products={products}
            source={source}
            mainImage={mainImage}
          />
        , this.el)

createPortal()会将子级/组件呈现到您创建的div中（而不是创建新的div），然后将div附加到根元素上。

参见React Portals

反应酶测试门户

1 个答案: