13

我在我的 React 应用程序中使用 Next JS，在门户中创建模式时遇到问题，它会抛出错误“目标容器不是 DOM 元素。” ，这是我的代码。

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classes from './listModal.scss';

const EditorListModal = (props) => {
  let container;
  if (typeof window !== 'undefined') {
    const rootContainer = document.createElement('div');
    const parentElem = document.querySelector('#__next');
    parentElem.appendChild(rootContainer);
    container = rootContainer;
  }
  const isShown = props.show ? classes['editor-listModal--open'] : '';
  const element = (
    <div className={`${classes['editor-listModal']} ${isShown}`}>
      // Modal Content
    </div>
  );

  return ReactDOM.createPortal(element, container);
};

EditorListModal.propTypes = {
  show: PropTypes.bool
};

export default React.memo(EditorListModal);
4

2 回答 2

16

接受的答案不是最佳选择。当服务器渲染的内容与客户端的不同时，您可能会遇到很多渲染问题。主要思想是在 SSR 和水合期间具有相同的内容。在您的情况下，使用选项动态加载模式会更准确。{ ssr: false }

作为第二个选项，请注意下一个示例。它们总是null在服务器和客户端的初始渲染期间返回，这是一种正确的方法。

于 2021-02-25T16:14:49.693 回答
11

由于container未初始化，它将在 ssr 期间中断。当没有门户时，您可以尝试跳过渲染：

return container ? ReactDOM.createPortal(element, container) : null;
于 2019-12-19T13:36:47.240 回答