next.js 在React中,服务器端组件如何与客户端组件通信?

nwnhqdif  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(326)

我正在使用Next.js,并正在测试他们的新数据获取方式,但这也可能是一个一般的React 18+问题,因为库本身正在转向客户端和服务器组件之间的区别。
假设我有一个设置:

// page.tsx (server component)
export default function Home() {
  return (
    <>
      <Search /> {/* Search is a client component that tracks state for an input */}
      <ServerData /> {/* ServerData is a server component that gets the initial data */}
    </>
  )
}

由于Search跟踪input状态,我如何使用该值并在ServerData上执行客户端过滤器?
我尝试过的:Search可以是接受子prop的客户端组件。page.tsx可以被重新构造,这样SearchData作为子对象传递给Search,ServerData可以接受输入prop。这可能不起作用,因为我不能将input传递给ServerData,因为Search只将其理解为children

hyrbngr7

hyrbngr71#

服务器组件可以简单地将prop传递给客户端组件。请注意,这些props必须是可序列化的。例如,事件处理程序因此无法工作。
另见:https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization
从服务器传递到客户端组件的Prop需要是可序列化的。这意味着诸如函数、日期等值不能直接传递给客户端组件。

相关问题