React服务端与客户端组件Render Prop模式报错及循环问题求助

场景与问题 #

有一个服务端父组件Parent.tsx，需要向客户端子组件Child.tsx传递按钮组件MyClientButton，按钮需要使用子组件中的index参数调用服务端函数myServerFunction，但遇到两个问题：

1. 初始代码直接传递渲染函数getMyButton时，触发报错：

   Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

2. 给getMyButton添加"use server"标记并改为异步函数后，客户端组件出现无限渲染循环，原因是React持续解析异步函数触发重渲染。

错误原因 #

• 第一个错误：Next.js的组件隔离规则禁止服务端组件直接向客户端组件传递未标注的普通函数，因为客户端组件无法安全执行服务端环境的函数。
• 第二个错误：带"use server"的异步函数会被React视为Suspense异步渲染单元，客户端组件每次渲染都会触发函数执行，进而引发重渲染循环。

解决方案 #

核心思路：不要在服务端组件中传递渲染函数给客户端组件，改用以下两种方式：

方案一：客户端组件直接渲染按钮（最简单） #

让客户端子组件Child.tsx直接导入并渲染MyClientButton，将index作为props传递即可，无需服务端介入按钮渲染逻辑。

修改后的代码：

Parent.tsx（服务端组件）

// Parent.tsx (Server Component)
import Child from './Child'

export default async function Parent() {
  const items = await fetchItems() // 服务端获取数据

  return (
    <div>
      <Child items={items} />
    </div>
  )
}

Child.tsx（客户端组件）

// Child.tsx (Client Component)
"use client";
import MyClientButton from './MyClientButton';

export default function Child({
  items,
}: {
  items: string[];
}) {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <p>{item}</p>
          <MyClientButton index={index} />
        </div>
      ))}
    </div>
  );
}

MyClientButton.tsx与myServerFunction.ts保持不变

这两个文件原本的逻辑是正确的，客户端按钮通过"use server"标记的服务端函数发起调用，符合Next.js规则。

方案二：服务端传递按钮配置（动态控制场景） #

如果需要服务端动态控制按钮的显示/隐藏、样式等逻辑，不要传递渲染函数，而是传递配置数据给客户端组件，由客户端根据配置渲染按钮。

示例代码：

Parent.tsx（服务端生成配置）

// Parent.tsx (Server Component)
import Child from './Child'

export default async function Parent() {
  const items = await fetchItems()
  // 服务端生成按钮配置，例如仅偶数索引显示按钮
  const buttonConfigs = items.map((_, index) => ({
    show: index % 2 === 0,
    index
  }))

  return (
    <div>
      <Child items={items} buttonConfigs={buttonConfigs} />
    </div>
  )
}

Child.tsx（客户端根据配置渲染）

// Child.tsx (Client Component)
"use client";
import MyClientButton from './MyClientButton';

export default function Child({
  items,
  buttonConfigs,
}: {
  items: string[];
  buttonConfigs: { show: boolean; index: number }[];
}) {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <p>{item}</p>
          {buttonConfigs[index].show && <MyClientButton index={index} />}
        </div>
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Erik Metz