reactjs - 为什么会显示错误：错误：目标容器不是 DOM 元素，在创建 ReactDOM.createPortal() 并传递 const 变量时

Question

在关于 ReactJS 和 context API 的教程中，我试图通过在由 React.Component 扩展的类中创建一个 const 来呈现 Modal 类

import React from 'react';
import ReactDOM from 'react-dom';
import './style.scss';
import { AppContext } from '../../context/appContext';

class Modal extends React.Component {
    render() {
        const node = (
            <div
                className="modal-container">
                <div className="modal">
                    <h1>modal</h1>
                </div>
            </div>
        );

        return ReactDOM.createPortal(node, document.getElementById('modal'));
    }
}

Modal.contextType = AppContext;

export default Modal;

并且在布局类上使用这个类也扩展了 React.Component 并使用 ReactDOM

import Modal from '../modal';
<Modal />

但是当我尝试渲染它时，它给了我我创建的 const 节点的错误，它不是 DOM 元素，也在我遵循的教程中，他没有任何错误。

Error: Target container is not a DOM element.
createPortal$$1 [as createPortal]
> 17 |         return ReactDOM.createPortal(node, document.getElementById('modal'));
View compiled
▶ 16 stack frames were collapsed.

标签： reactjsreact-domreact-context