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

Question

错误：无法将事件处理程序传递给客户端组件的 props。

^^^^^^^^^^ 如果您需要交互性，请考虑将部分内容转换为客户端组件。

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官方文档和有关服务器/客户端渲染的内容。

- 밍원MinGWon

---

你尝试过将该组件转换为客户端组件吗？即在文件顶部添加 'use client';。 - juliomalves

Answer 1

添加

'use client';

如果你想要在 Next 13 中使用客户端交互，那么你需要在使用 handleClick 的文件顶部使用 use client，因为默认情况下 Next 13 中的所有组件都是服务器组件。

- shivanshu

---

但是，你立即遇到了问题，因为NextJS在渲染异步组件方面存在问题..argggh - Spock

是的，在客户端组件中不能直接使用fetch。NextJS建议使用数据获取库，如SWR或React Query https://beta.nextjs.org/docs/data-fetching/fetching#use-in-client-components - Kedel Mihail

这似乎是一种退步。我相信在 Next 12 中（使用 getStaticProps），您可以在服务器组件中绑定点击处理程序。 - darKnight

@darKnight之前使用gsp/gssp/isr时，您只能为整个route/page.tsx选择一种hydration方法。现在，使用server components，您可以在组件级别选择hydration方法，而无需考虑路由级别。此外，使用server components，您可以通过suspense回退到加载状态，但是使用gssp，您必须等待整个页面获取服务器渲染（出现白屏，冷启动情况更糟，我曾见过高达20秒的情况）。 - shivanshu

顺便说一下，要防止客户端组件成为异步函数。 https://nextjs.org/docs/messages/no-async-client-component - undefined

@xgqfrms 异步客户端组件最终将在未来的RFC中得到支持（可能会使用react forget）。请参考https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#why-cant-client-components-be-async-functions。 - undefined

Answer 2

客户端组件可以被导入到服务器组件中，但反过来不行，这使我们能够在组件级别上创建服务器或客户端组件。

例如，假设我们有一个有问题的代码片段，比如一个在异步服务器组件中实现了onClick事件处理程序并因此抛出错误的按钮，我们可以通过在新按钮组件的第一行添加"use client"注释，将该按钮提取到它自己的客户端组件中，这样我们仍然可以在我们的异步服务器组件中使用await，然后将按钮作为客户端组件导入。

阅读更多关于组合客户端和服务器组件的内容

- Kelvin praises

Answer 3

这是真的，你不能将事件处理程序作为属性传递给客户端组件，但唯一的例外是服务器操作。来自文档：

属性

在某些情况下，您可能希望将服务器操作作为属性传递给客户端组件。

 <ClientComponent myAction={updateItem} />

- Yilmaz

Answer 4

如果你想继续使用服务器端组件，你可以使用 next/link。

import Link from "next/link";

<Link href={"/test"} />

你可以在一个新页面/test上免费做一些事情。

- Dave Lee