错误：目标容器不是 DOM 元素（React/Nextjs）答案

【问题标题】：Error: Target container is not a DOM element ( React/Nextjs)错误：目标容器不是 DOM 元素（React/Nextjs）
【发布时间】：2021-08-24 09:40:57
【问题描述】：

我在 React 中创建了一个上下文组件，用于在我的所有 React 页面中返回一条消息。

我收到了这个主题的错误。查看了stackoverflow中的其他问题，但没有一个可以帮助我。

代码如下：

message.js

function Message(props) {
const messageCtx = useContext(MessageBannerContext);

    return ReactDOM.createPortal(
        <div>
            <p>Message</p>
            <button>More info</button>
            <button onClick={messageCtx.hideMessage}>Ok</button>
        </div>,
        useEffect(() => {
            document.getElementById('message');
        }, [])
    );
}

export default Message;

_document.js

class MyDocument extends Document {

    render() {
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <DeferNextScript />
                </body>
                <div id="message"></div>
            </Html>
        );
    }
}

export default MyDocument;

任何想法为什么我在主题中遇到错误？

【问题讨论】：

您将 useEffect 调用作为第二个参数传递给 ReactDOM.createPortal，但它需要一个 DOM 节点。
这是否回答了您的问题：Getting "Target container is not a DOM element" error when using createPortal in Next.js?

标签： reactjs next.js

【解决方案1】：

Nextjs 在服务器中运行，所以没有定义文档对象。我一直在为此苦苦挣扎，但是您可以尝试一个名为 jsdom 的包。

【讨论】：