我知道使用React,你可以根据它们的id来定位特定的元素,并在其中呈现一个特定的组件,就像这样:
if(document.getElementById('root')) {
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<SomeComponent/>
</React.StrictMode>
);
}
然后,通过捆绑构建脚本,您可以在任何外部网页中链接它们,并使用root ID进行潜水以呈现该组件。
这可以用Next.js以某种方式完成吗?我试图使用导出功能并使用构建的块,但我很难找到在div中渲染任何组件的方法。提前感谢您的任何帮助!
我已经尝试了react解决方案,但无法实现这一点。
TLDR:我想有一个简单的test.html网页,它与Next.js应用程序分开。然后我想将Next.js导出的捆绑链接(js文件)导入到此text.html页面。在test.html中,我会有以下div:<div id="root"> </div>
我的目标是让捆绑的js能够将Next.js应用程序中的组件注入到这个外部text.html网页中。
1条答案
按热度按时间oxf4rvwz1#
是的,你可以用next dynamic import实现这个。
示例:
如果你需要用nextjs获取DOM元素,你可以在
useEffect
中访问DOM,没有依赖关系(它在客户端运行)