创建一个动态按钮:
'use client';
import type { IconType } from 'react-icons';
interface ButtonProps {
children: React.ReactNode;
Icon: IconType;
}
export default function Button(props: ButtonProps) {
const { children, Icon } = props;
return (
<button>
<Icon />
{children}
</button>
);
}
我在传递React Icon作为props时遇到了一个问题:Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". <... Icon={function} children=...>
.
我不知道如何将'use server'插入到React Icon组件中?
1条答案
按热度按时间fcwjkofz1#
从服务器组件传递到客户端组件的prop需要是可序列化的,因为它们是通过网络发送的。组件是一个函数,这就是为什么你会看到错误消息。
Icon组件从何而来?你能直接在客户端组件中导入它吗?