reactjsnext.jsserver-side-renderingprimereact

Cannot pass template component as a property in NextJS


Here is the code:

// page.tsx

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>
  );
}

However, it gives me the error:

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... header="Operation" body={function}>
                               ^^^^^^^^^^

But the problem is that the buttonsTemplate() is not a server action but a component, so it shouldn't add the "use server;". But if I do not add the mark, the error cannot be solved.


Solution

  • 试试给page顶部标记为use client?组件默认是rsc,但是column是client component,rsc中应该不能传递函数给client除非标记use server