提问人：Collin Huber 提问时间：4/17/2023 更新时间：9/29/2023 访问量：3617
将服务器端道具传递给客户端组件
Pass a server-side prop to a client-side component
问：
我正在尝试弄清楚如何将 nextjs 13 应用程序的服务器端声明的变量传递到我在其中一个组件文件中声明的客户端函数中。正如您在我的代码中看到的那样，我正在尝试将“x”变量传递到 Props 函数中，该函数是客户端组件的一部分。我正在尝试控制台记录传递给 Props 函数的变量，以查看该变量是否正确传递。但它以“未定义”的形式返回。有人可以向我解释如何传递这个变量吗？注意：我知道在当前示例中，我的组件不必位于客户端。我只是提供此代码作为示例来回答我的问题。
服务器端代码：
import Props from "./Components/props"
export default function Home() {
const x = 'hello'
return(
<main>
<Props
data = {x}
/>
<p>Hello</p>
</main>
)
}
客户端代码：
"use client"
export default function Props({ data }) {
console.log(data);
return (
<p>Test</p>
);
};
错误：
error - SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
答：
0赞
Kolya Bazlov
6/6/2023
#1
从服务器传递到客户端组件的道具需要可序列化
这可能是一个原因
评论
1赞
Deoxyseia
6/7/2023
最好参考引用以显示定义，但问题的核心是如何序列化它。您的答案看起来不完整，并且不会提供解决方案。
0赞
Kolya Bazlov
6/9/2023
对不起，但在问题中没有“如何序列化”
0赞
ADTC
8/16/2023
“我如何传递这个变量？”隐含地要求提供如何实现目标的完整说明，其中包括如何执行所需的步骤（例如“如何序列化”），所以是的，你的答案没有提供解决方案，不幸的是，Vercel 的文档也没有。
0赞
Kolya Bazlov
8/28/2023
对不起，这么晚了，我太忙了。从服务器页面到客户端页面，我只是像传递任何组件一样传递 props<ClientPage props={dataFromServerPage} />。如果您找到任何更好看的解决方案，请告诉我。
0赞
hawkinside_out
9/29/2023
#2
每当您想将数据从服务器端传递到客户端时，您都需要返回一个对象，其中包含要传递给客户端的数据的键值对。您可以通过 props 对象访问它。
服务器端
export const getServerSideProps = async () {
const x = 'hello';
return {
x
}
}
客户端
export const Home = async (props) => {
console.log(props.x);
}
评论
'hello'data={'hello'}