将React Icon作为props传递给NextJS中的客户端组件

zvokhttg  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(210)

创建一个动态按钮:

'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组件中?

fcwjkofz

fcwjkofz1#

从服务器组件传递到客户端组件的prop需要是可序列化的,因为它们是通过网络发送的。组件是一个函数,这就是为什么你会看到错误消息。
Icon组件从何而来?你能直接在客户端组件中导入它吗?

相关问题