NextJS 13 <button onClick={}> 事件处理程序无法传递给客户端组件 props

Question

错误：事件处理程序无法传递给客户端组件道具。^^^^^^^^^^ 如果您需要交互性，请考虑将其部分转换为客户端组件。

const reqHelp = () => {
    Swal.fire({
        title: '1',
        text: '1',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
    })
}

return(
        <div className="buttons">
            <button onClick={reqHelp} className="stopwatchButton">Request Help</button>
        </div>
);

搜索 NextJS 13 官方文档以及关于服务器/客户端渲染

Answer 1

添加

'use client';

在您正在使用的文件顶部handleClick，因为默认情况下 Next 13 中的所有组件都是服务器组件，因此对于客户端交互，您需要使用use client.

Answer 2

客户端组件可以导入到服务器组件中，但反之则不行，这允许我们在组件级别创建服务器或客户端组件。

例如，假设我们有一段令人讨厌的代码，例如异步服务器组件中的按钮，由于实现事件处理程序而引发错误，我们可以通过在代码的第一行添加注释来onClick将按钮提取到它自己的客户端组件"use client"中新的按钮组件，这样我们仍然可以await在异步服务器组件中使用，然后将按钮导入为客户端组件。

阅读有关编写客户端和服务器组件的更多信息