Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window
前言
近期使用React官方推薦的服務(wù)端渲染工具Next.js進(jìn)行服務(wù)端頁(yè)面編程時(shí)遇到引入百度分享等外部JS文件的問(wèn)題。
Next.js可以使用內(nèi)置組件來(lái)裝在 <head> 到頁(yè)面中
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>那么我們就可以用這個(gè)特性引入外部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文件的問(wèn)題，但是百度分享自身會(huì)存在一個(gè)問(wèn)題：百度分享異步操作加載進(jìn)頁(yè)面的時(shí)候不會(huì)立即渲染，因?yàn)橐驗(yàn)榘俣确窒韴?zhí)行后，會(huì)創(chuàng)建全局的window.__bd_share_main，所以 需要在 ajax請(qǐng)求完成后執(zhí)行一下window.__bd_share_main.init();
但是由于window操作是客戶端行為，而Next.js自身是服務(wù)端渲染(SSR)的原因是沒有window對(duì)象的，解決辦法是利用Next.js動(dòng)態(tài)導(dǎo)入，官方文檔有說(shuō)明，動(dòng)態(tài)導(dǎo)入是可以禁止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>像官方文檔一樣動(dòng)態(tài)引入百度分享所在組件即可解決問(wèn)題了
// 禁止ssr const ShareCol = dynamic(import('../components/sharecol'),{ssr:false})百度分享組件中，在componentDidMount鉤子函數(shù)中操作如下
componentDidMount(){if(window._bd_share_main){ window._bd_share_main.init();} }其他類似的外部引入問(wèn)題也可以這樣解決
總結(jié)
以上是生活随笔為你收集整理的Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python txt文件切割
- 下一篇： 赛门铁克发现智能电视或面临感染勒索软件的