如何通过以下示例将客户端组件数据发送到服务器组件
- 组件下面是一个客户端组件
- 子组件或
{children}
将是服务器组件
<ClientComponent>
<ServerComponent/>
</ClientComponent>
问题
- 我需要将
count
和setCount
发送到该服务器组件。 - 我不能做
count
和setCount
它的父原因是一个服务器组件。
我尝试了很多不同的方式&在文档中搜索,但失败了。
'use client'
import { useState } from 'react'
export default function ClientComponent({
children,
}: {
children: React.ReactNode
}) {
const [count, setCount] = useState(0)
return (
<>
<button onClick={() => setCount(count + 1)}>{count}</button>
{children}
</>
)
1条答案
按热度按时间z5btuh9x1#
不能使用props将数据从Client组件发送到Server组件。
有一些“黑客”的方式来共享数据,如使用请求参数。你可以在这里看看一些答案:How can I pass state from a client component to a server component?
但请注意,它不会为您的用例工作。
原因是,您需要将事件处理程序(
setCount
)传递给服务器组件,该组件不是可序列化的请求。所以行不通。所以你有两个选择
1.更改组件结构以避免将
setCount
传递给服务器组件。1.使用服务器操作。
使用服务器操作,您可以将服务器组件的一部分转换为仅在服务器上执行,并将其余部分转换为客户端组件(以便您现在可以将props传递给此组件)。
app/actions.js
:app/client-component.jsx
:请注意,服务器操作仍然是实验性的。
更多详情请参考:https://nextjs.org/docs/app/api-reference/functions/server-actions
另外,下面的组件不能是客户端组件
因为您无法将服务器组件导入到客户端组件中。
因此,上面的组件需要是服务器组件,或者您需要使用
{children}
(而不是<ServerComponent/>
)。更多详情请参考:https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components