时间戳

首页 > 解决方案 > 错误：目标容器不是 DOM 元素（React/Nextjs）

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

问题描述

我在 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;

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

标签： reactjsnext.js

解决方案

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

推荐阅读