与NextJS集成

[Eliot00]

原文

'use client'

import Script from 'next/script'

export default function Comment() {
  return (
    <div>
      <div id="tcomment"></div>
      <Script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.min.js"
        onReady={() => {
          window.twikoo.init({
            envId: '', // 根据后端部署方式不同
            el: '#tcomment',
          })
        }}
      />
    </div>
  )
}

[ciraos]

类型“Window & typeof globalThis”上不存在属性“twikoo”。，是什么回事

[Eliot00]

因为TS类型检查不知道twikoo的脚本会添加这个属性，参考这个就可以了

[ciraos]

好的，谢谢！

[Redish101]

"use client"; 
  
 import { getConfig } from "@/core/config"; 
 import { useEffect, useState } from "react"; 
  
 export default function Comment() { 
   const [loadingStatus, setLoadingStatus] = useState<"loading" | "error">( 
     "loading", 
   ); 
   const config = getConfig(); 
  
   useEffect(() => { 
     if (config.twikoo) { 
       import("twikoo") 
         .then(({ default: init }) => { 
           init({ 
             envId: config.twikoo?.envId!, 
             el: "#tcomment", 
           }); 
         }) 
         .catch((error) => { 
           setLoadingStatus("error"); 
           console.error(`Failed to load twikoo: ${error}`); 
         }); 
     } 
   }); 
  
   if (config.twikoo) { 
     return ( 
       <div id="tcomment"> 
         {loadingStatus === "loading" && <div>正在加载评论...</div>} 
         {loadingStatus === "error" && <div>评论加载失败</div>} 
       </div> 
     ); 
   } 
 }