如何在NextJS 13中使用支持的组合模式将客户端组件数据发送到服务器组件

woobm2wo 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(111)

如何通过以下示例将客户端组件数据发送到服务器组件

组件下面是一个客户端组件
子组件或{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}
    </>
  )

next.js

来源：https://stackoverflow.com/questions/77224105/how-to-send-client-component-data-to-server-component-with-supported-compose-pat

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：

'use server'
 
export async function myAction() {
  // ...
}

app/client-component.jsx：

'use client'
 
import { myAction } from './actions'
 
export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

请注意，服务器操作仍然是实验性的。
更多详情请参考：https://nextjs.org/docs/app/api-reference/functions/server-actions
另外，下面的组件不能是客户端组件

<ClientComponent>
 <ServerComponent/>
</ClientComponent>

因为您无法将服务器组件导入到客户端组件中。
因此，上面的组件需要是服务器组件，或者您需要使用{children}（而不是<ServerComponent/>）。
更多详情请参考：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components

赞(0）回复(0）举报 2023-10-18

我来回答

如何在NextJS 13中使用支持的组合模式将客户端组件数据发送到服务器组件

问题

1条答案

相关问题

热门标签

最新问答