NextJS onClick无需addEventListener调用客户端JS函数实现问题

报错根因 #

React 中的 onClick 属性不支持原生 HTML 那种字符串格式的事件调用写法，要求必须传入函数类型的值，所以写onClick="ClientClick(1)"会直接触发类型错误。

以下是两种无需使用addEventListener的实现方案： #

方案1：挂载函数到全局window对象（适配现有外部JS文件用法） #

第一步：修改slider.js，把函数暴露到全局 #

// /assets/slider.js
window.ClientClick = function(clickedId) {
    // 原有DOM操作逻辑
}

第二步：修改组件onClick写法，传入函数调用 #

import Script from 'next/script'
export default function MyComponent({ props }) {
    return (
        <>
        <div className="slider-buttons">
            {/* 用箭头函数包裹调用，加可选链避免JS未加载完成时报错 */}
            <div key="1" onClick={() => window.ClientClick?.(1)} className="slider-button active"></div>
            <div key="2" onClick={() => window.ClientClick?.(2)} className="slider-button"></div>
            <div key="3" onClick={() => window.ClientClick?.(3)} className="slider-button"></div>
            <div key="4" onClick={() => window.ClientClick?.(4)} className="slider-button"></div>
        </div>
        <Script src="/assets/slider.js" strategy="afterInteractive" />
        </>
    )
}

方案2：模块化引入（符合React/Next.js规范的最优方案） #

如果不需要把逻辑单独放在公共静态JS文件给非React部分调用，可以直接把函数改为可导出的模块，直接引入组件使用，无需额外引入Script标签，也不会污染全局变量：

第一步：调整slider.js为模块导出 #

// 建议放到项目utils目录下
// /utils/slider.js
export default function ClientClick(clickedId) {
    // 原有DOM操作逻辑
}

第二步：组件内导入直接使用 #

import ClientClick from '@/utils/slider.js'

export default function MyComponent({ props }) {
    return (
        <div className="slider-buttons">
            <div key="1" onClick={() => ClientClick(1)} className="slider-button active"></div>
            <div key="2" onClick={() => ClientClick(2)} className="slider-button"></div>
            <div key="3" onClick={() => ClientClick(3)} className="slider-button"></div>
            <div key="4" onClick={() => ClientClick(4)} className="slider-button"></div>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者BK52