Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window
生活随笔
收集整理的這篇文章主要介紹了
Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
近期使用React官方推薦的服務端渲染工具Next.js進行服務端頁面編程時遇到引入百度分享等外部JS文件的問題。
Next.js可以使用內置組件來裝在 <head> 到頁面中
import Head from 'next/head'export default () =><div><Head><title>My page title</title><meta name="viewport" content="initial-scale=1.0, width=device-width" /></Head><p>Hello world!</p></div>那么我們就可以用這個特性引入外部js文件了，下面是引入百度分享的例子：
import Head from 'next/head'export default () =><div><Head><title>My page title</title><meta name="viewport" content="initial-scale=1.0, width=device-width" /><script>{` with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];`}</script> </Head></div>這樣就很好解決了怎么引入類似百度分享一類的外部js文件的問題，但是百度分享自身會存在一個問題：百度分享異步操作加載進頁面的時候不會立即渲染，因為因為百度分享執行后，會創建全局的window.__bd_share_main，所以 需要在 ajax請求完成后執行一下window.__bd_share_main.init();
但是由于window操作是客戶端行為，而Next.js自身是服務端渲染(SSR)的原因是沒有window對象的，解決辦法是利用Next.js動態導入，官方文檔有說明，動態導入是可以禁止SSR的,如下：
import dynamic from 'next/dynamic'const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), {ssr: false })export default () =><div><Header /><DynamicComponentWithNoSSR /><p>HOME PAGE is here!</p></div>像官方文檔一樣動態引入百度分享所在組件即可解決問題了
// 禁止ssr const ShareCol = dynamic(import('../components/sharecol'),{ssr:false})百度分享組件中，在componentDidMount鉤子函數中操作如下
componentDidMount(){if(window._bd_share_main){ window._bd_share_main.init();} }其他類似的外部引入問題也可以這樣解決
總結
以上是生活随笔為你收集整理的Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python txt文件切割
- 下一篇： Windows下Tuxedo的安装与配置