如何使用 Next 13 将组件作为 prop 传递

Question

我有一个名为的客户端组件Tab：

import * as React from "react";
import type { IconType } from "react-icons";

type TabProps = {
  Icon: IconType;
  label: string;
  isActive?: boolean;
};


export default function Tab({
  Icon,
  label,
  isActive = false,
  ...props
}: TabProps) {
  return (
    <div>
      <Icon size={20} />
      {label}
    </div>
  );
}

每当我尝试使用此组件时，都会收到此错误： Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"。

好的。我尝试将通过的组件包装Icon在一个使用的函数中"use server"，但下一步要求我启用一些实验标志来使用该指令。

有什么方法可以实现我想要的而不经历这一切吗？我知道这在old反应中是可能的。我是否需要在使用图标之前将其声明为客户端组件，或者是否有更好的解决方案？

Answer 1

您无法将组件从服务器组件传递到客户端组件，因为它需要可序列化。

但你可以使用 Slot 方法。在你的Tab.tsx：

import React from "react";

type TabProps = {
  Icon: React.ReactElement;
  label: string;
  isActive?: boolean;
};


export default function Tab({
  Icon,
  label,
  isActive = false,
  ...props
}: TabProps) {
  return (
    <div>
      <Icon.type {...Icon.props} size={20}/>
      {label}
    </div>
  );
}

您的父组件：

<Tab Icon={<Icon/>}/>