我正在使用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
。
1条答案
按热度按时间hyrbngr71#
服务器组件可以简单地将prop传递给客户端组件。请注意,这些props必须是可序列化的。例如,事件处理程序因此无法工作。
另见:https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization
从服务器传递到客户端组件的Prop需要是可序列化的。这意味着诸如函数、日期等值不能直接传递给客户端组件。