传递渲染道具在下一个13中不起作用

现阶段,函数在Next.js中不可串行化。渲染道具作品RSC->RSC或RCC->RCC而不是RSC->碾压混凝土,但它似乎。在这种情况下,在我看来,编译器可以很容易地变得足够智能来处理这种情况,但我认为Next.js 13应用程序目录和RSC需要一些时间才能成熟。

在我看来,创建一个中间客户端组件是可行的。

"use client"
// ... 

export const MyLivePreview = ({ data }: { data: WhateverDataType }) => <LivePreviewWrapper<ContentfulPage> data={data}>
          {({ updatedData }) => {
            return (
              <div className='space-y-8'>
                {updatedData.fields.body.map((entry) => {
                  if (!entry) return null
                  switch (entry.sys.contentType.sys.id) {
                    case 'hero': {
                      return <ContentfulHero key={entry.sys.id} entry={entry as ContentfulHeroProps} />
                    }

                    case 'highlightSession': {
                      return <ContentfulHighlight key={entry.sys.id} entry={entry as ContentfulHighlightProps} />
                    }

                    case 'grid': {
                      return <ContentfulGrid key={entry.sys.id} entry={entry as ContentfulGridProps} />
                    }

                    case 'textSession': {
                      return <ContentfulTextSession key={entry.sys.id} entry={entry as ContentfulTextSessionProps} />
                    }

                    case 'speaker': {
                      return <ContentfulSpeaker key={entry.sys.id} entry={entry as ContentfulSpeakerProps} />
                    }

                    case 'cta': {
                      return <ContentfulCta key={entry.sys.id} entry={entry as ContentfulCtaProps} />
                    }

                    case 'horizontalTabs': {
                      return (
                        <ContentfulHorizontalTabs key={entry.sys.id} entry={entry as ContentfulHorizontalTabsProps} />
                      )
                    }

                    case 'customersLogos': {
                      return <LogoList key={entry.sys.id} />
                    }

                    default:
                      console.warn(entry.sys.contentType, 'was not handled')
                      return null
                  }
                })}
              </div>
            )
          }}
        </LivePreviewWrapper>

然后

export default async function ContentfulLandingPage({ params, searchParams }: LandingPageParams) {
  const isDraftMode = searchParams?.draftMode === 'enabled'
  const data = await getPageBySlug({ slug: params.slug, isDraftMode })

  if (!data) {
    notFound()
  }

  return (
    <ContentfulProvider>
      <main className='pb-8 lg:pb-12'>
        <MyLivePreview data={data} />
      </main>
    </ContentfulProvider>
  )
}

令人烦恼的是,根据我使用Next.js 13应用程序目录的经验,需要进行大量的代码拆分。我想编译器会变得更聪明,知道什么是服务器,什么是客户端。

如果这有帮助,请告诉我(注意,我实际上并没有测试任何这些)。否则,我们将乐意帮助诊断问题。

使用useServer钩子可能会解决您的问题,请检查代码,为了进一步参考,我将附上链接

堆栈溢出: Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

下一个文档: https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components

github: https://github.com/vercel/next.js/discussions/47846

// page.tsx

"use server";

import { ClientComponent } from './ClientComponent.tsx';

async function deleteItem(itemId: string) {
  "use server"; // mark function as a server action (fixes the error)

  // TODO add item deletion logic
  return null;
}

export function Page() {
  return <ClientComponent deleteItem={deleteItem} />
}
// ClientComponent.tsx

export function ClientComponent({ deleteItem }) {
  return (
    <button onClick={async () => {
      await deleteItem("foobar");
      alert("item has been deleted");
    }}>
      delete item
    </button>
  );
}

像这样添加useServer:

const MyLiveComponent = ({ updatedData }) => {
  return (
    <div className='space-y-8'>
      {updatedData.fields.body.map((entry) => {
                  if (!entry) return null
                  switch (entry.sys.contentType.sys.id) {
                    case 'hero': {
                      return <ContentfulHero key={entry.sys.id} entry={entry as ContentfulHeroProps} />
                    }

                    case 'highlightSession': {
                      return <ContentfulHighlight key={entry.sys.id} entry={entry as ContentfulHighlightProps} />
                    }

                    case 'grid': {
                      return <ContentfulGrid key={entry.sys.id} entry={entry as ContentfulGridProps} />
                    }

                    case 'textSession': {
                      return <ContentfulTextSession key={entry.sys.id} entry={entry as ContentfulTextSessionProps} />
                    }

                    case 'speaker': {
                      return <ContentfulSpeaker key={entry.sys.id} entry={entry as ContentfulSpeakerProps} />
                    }

                    case 'cta': {
                      return <ContentfulCta key={entry.sys.id} entry={entry as ContentfulCtaProps} />
                    }

                    case 'horizontalTabs': {
                      return (
                        <ContentfulHorizontalTabs key={entry.sys.id} entry={entry as ContentfulHorizontalTabsProps} />
                      )
                    }

                    case 'customersLogos': {
                      return <LogoList key={entry.sys.id} />
                    }

                    default:
                      console.warn(entry.sys.contentType, 'was not handled')
                      return null
                  }
                })}
    </div>
  );
};

export default function ContentfulLandingPage({ params, searchParams }: LandingPageParams) {
const isDraftMode = searchParams?.draftMode === 'enabled'
  const data = await getPageBySlug({ slug: params.slug, isDraftMode })

  if (!data) {
    notFound()
  }
  return (
    <ContentfulProvider>
      <main className='pb-8 lg:pb-12'>
        <LivePreviewWrapper<ContentfulPage> data={data}>
          {useServer(() => <MyLiveComponent />)}
        </LivePreviewWrapper>
      </main>
    </ContentfulProvider>
  );
}