NextJS中模板组件作为属性传递报错的问题求助

方法1：拆分独立客户端组件 #

1. 创建新的客户端组件文件（如BookTable.tsx），开头添加'use client'指令：

'use client';

import { DataTable, Column, Button } from '你的组件库路径';
import { Book } from '你的类型定义路径';

function buttonsTemplate(book: Book) {
  return (
    <div>
      <Button>Remove</Button>
      <Button>Modify</Button>
    </div>
  );
}

export default function BookTable({ books }: { books: Book[] }) {
  return (
    <div>
      <DataTable value={books}>
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column header="Operation" body={buttonsTemplate}></Column>
      </DataTable>
    </div>
  );
}

2. 在原page.tsx（默认是服务端组件）中引入并使用该客户端组件：

import BookTable from './BookTable';
import { BOOKS } from '你的数据路径';

export default function Management() {
  return (
    <div>
      <BookTable books={BOOKS} />
    </div>
  );
}

方法2：将当前页面转为客户端组件 #

如果页面不需要服务端渲染特性，直接在page.tsx开头添加'use client'指令，让整个页面成为客户端组件，即可消除函数传递限制：

'use client';

import { DataTable, Column, Button } from '你的组件库路径';
import { Book, BOOKS } from '你的数据和类型路径';

function buttonsTemplate(book: Book) {
  return (
    <div>
      <Button>Remove</Button>
      <Button>Modify</Button>
    </div>
  );
}

export default function Management() {
  return (
    <div>
      <DataTable value={BOOKS}>
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column header="Operation" body={buttonsTemplate}></Column>
      </DataTable>
    </div>
  );
}

问题原因 #

Next.js App Router中，page.tsx默认是Server Component，而你使用的DataTable/Column属于Client Component。服务端组件不能直接向客户端组件传递函数（use server标记仅适用于服务端操作，不适合UI组件）。通过拆分客户端组件或转换页面类型，让函数在客户端环境内传递，就能解决该错误。

内容的提问来源于stack exchange，提问作者Lomírus