英文:
Passing callback from server component to client component in Next.js
问题
我卡在了一个地方,我正在创建一个自定义按钮组件,将其标记为客户端组件,然后我从服务器端组件传递它的 onClick
回调,但它给我报错:
错误 Error: 无法将事件处理程序传递给客户端组件的 props。
<button onClick={function} className=... children=...>
^^^^^^^^^^
如果需要交互性,请考虑将部分内容转换为客户端组件。
at stringify (<anonymous>)
digest: "280571554"
这是我的 WelcomeComponent.tsx
文件:
import { faPizzaSlice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Brand, Button } from "@/components/Common";
import Image from "next/image";
const WelcomeComponent = () => {
return (
<div className="border flex items-center justify-center flex-wrap space-x-10 py-10">
<div className="font-semibold flex flex-col">
<div className="mr-3 flex items-center text-3xl">
<span className="mr-2">Welcome to</span>
<Brand size="large" />
</div>
<h2 className="text-2xl">We Serve you with happiness.</h2>
<Button
text="Order Now"
icon={<FontAwesomeIcon className="w-6" icon={faPizzaSlice} />}
onClick={() => {
console.log("c");
}}
/>
</div>
<Image
className="w-auto h-auto"
height={0}
width={300}
src="/man.jpg"
priority
alt=""
/>
</div>
);
};
export default WelcomeComponent;
这是我的 Button.tsx
文件:
interface Props {
text: string;
icon: React.JSX.Element;
onClick: () => void;
}
const Button = ({ text, icon, onClick }: Props) => {
return (
<button
onClick={onClick}
className="shadow-lg my-5 flex items-center justify-center text-white bg-orange-400 hover:bg-orange-500 rounded-md p-3 w-40 space-x-2"
>
<span className="text-md">{text}</span>
{icon}
</button>
);
};
export default Button;
正如你所看到的,我想将 onClick
回调传递给 Button
组件,我在 WelcomeComponent.tsx
中调用它。
我正在使用 Next.js 的版本 v13.4
。
英文:
I am stuck at a point where I am creating a custom button component, marking it as a client component, and then I am passing its onClick
callback from a server-side component, and it's giving me this error:
error Error: Event handlers cannot be passed to Client Component props.
<button onClick={function} className=... children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
digest: "280571554"
This is my WelcomeComponent.tsx
file:
import { faPizzaSlice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Brand, Button } from "@/components/Common";
import Image from "next/image";
const WelcomeComponent = () => {
return (
<div className="border flex items-center justify-center flex-wrap space-x-10 py-10">
<div className="font-semibold flex flex-col">
<div className="mr-3 flex items-center text-3xl">
<span className="mr-2">Welcome to</span>
<Brand size="large" />
</div>
<h2 className="text-2xl">We Serve you with happiness.</h2>
<Button
text="Order Now"
icon={<FontAwesomeIcon className="w-6" icon={faPizzaSlice} />}
onClick={() => {
console.log("c");
}}
/>
</div>
<Image
className="w-auto h-auto"
height={0}
width={300}
src="/man.jpg"
priority
alt=""
/>
</div>
);
};
export default WelcomeComponent;
And this is my Button.tsx
file:
interface Props {
text: string;
icon: React.JSX.Element;
onClick: () => void;
}
const Button = ({ text, icon, onClick }: Props) => {
return (
<button
onClick={onClick}
className="shadow-lg my-5 flex items-center justify-center text-white bg-orange-400 hover:bg-orange-500 rounded-md p-3 w-40 space-x-2"
>
<span className="text-md">{text}</span>
{icon}
</button>
);
};
export default Button;
As you can see I want to pass the onClick
callback to the Button
component which I am calling in the WelcomeComponent.tsx
.
I'm using Next.js v13.4
.
答案1
得分: 1
以下是您要翻译的内容:
"That's because Server Components gets compiled to HTML and sent to the browser with no additional JavaScript, that click handler in your case. And this makes it so you can only pass non-function values from a server component to a client one.
The component that calls Button
should be a client one, with "use client"
at the top, as you need to pass a function from there, and it's okay, as Lee Robinson from Vercel says:
>Client Components aren't a de-opt, nor a cop-out. You can think of Server Components as an additive to the existing model. I understand the sentiment of wanting to use Server Components for lots of things (not bad!) but it's also totally okay to use Client Components for certain things.
"use client"; // Need to send a JavaScript function to the browser👈🏽
import { faPizzaSlice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Brand, Button } from "@/components/Common";
import Image from "next/image";
const WelcomeComponent = () => {
return (
<div className="border flex items-center justify-center flex-wrap space-x-10 py-10">
<div className="font-semibold flex flex-col">
<div className="mr-3 flex items-center text-3xl">
<span className="mr-2">Welcome to</span>
<Brand size="large" />
</div>
<h2 className="text-2xl">We Serve you with happiness.</h2>
<Button
text="Order Now"
icon={<FontAwesomeIcon className="w-6" icon={faPizzaSlice} />}
onClick={() => {
console.log("c");
}}
/>
</div>
<Image
className="w-auto h-auto"
height={0}
width={300}
src="/man.jpg"
priority
alt=""
/>
</div>
);
};
And even a client component first renders on the server with Next.js, so if it's for SEO, there is no worry.
英文:
That's because Server Components gets compiled to HTML and sent to the browser with no additional JavaScript, that click handler in your case. And this makes it so you can only pass non-function values from a server component to a client one.
The component that calls Button
should be a client one, with "use client"
at the top, as you need to pass a function from there, and it's okay, as Lee Robinson from Vercel says:
>Client Components aren't a de-opt, nor a cop-out. You can think of Server Components as an additive to the existing model. I understand the sentiment of wanting to use Server Components for lots of things (not bad!) but it's also totally okay to use Client Components for certain things.
"use client"; // Need to send a JavaScript function to the browser👈🏽
import { faPizzaSlice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Brand, Button } from "@/components/Common";
import Image from "next/image";
const WelcomeComponent = () => {
return (
<div className="border flex items-center justify-center flex-wrap space-x-10 py-10">
<div className="font-semibold flex flex-col">
<div className="mr-3 flex items-center text-3xl">
<span className="mr-2">Welcome to</span>
<Brand size="large" />
</div>
<h2 className="text-2xl">We Serve you with happiness.</h2>
<Button
text="Order Now"
icon={<FontAwesomeIcon className="w-6" icon={faPizzaSlice} />}
onClick={() => {
console.log("c");
}}
/>
</div>
<Image
className="w-auto h-auto"
height={0}
width={300}
src="/man.jpg"
priority
alt=""
/>
</div>
);
};
And even a client component first renders on the server with Next.js, so if it's for SEO, there is no worry.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论