NextJS 13中如何通过组合模式将客户端组件数据传递给服务端组件

组件组合场景 #

• 外层为客户端组件（Client Component）
• 子组件（{children}）为服务端组件（Server Component）

<ClientComponent>
  <ServerComponent/>
</ClientComponent>

问题描述 #

• 需要将客户端组件中的count和setCount传递给子服务端组件
• 由于父页面是服务端组件，无法将count和setCount向上传递给父组件再转发

客户端组件代码如下：

'use client'
 
import { useState } from 'react'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

解决方案 #

首先明确核心限制：服务端组件在服务端渲染阶段执行，此时客户端状态（如count、setCount）尚未初始化，因此无法直接将客户端动态状态传递给服务端组件。以下是两种可行的解决思路：

方案一：拆分组件，分离静态与动态逻辑 #

将服务端组件中依赖客户端状态的部分抽离为独立的客户端组件，服务端组件仅负责渲染不需要客户端状态的静态内容。

1. 拆分出依赖客户端状态的组件：

'use client'

// 负责展示/使用count状态的客户端组件
export function CountDependentClient({ count, setCount }: { count: number; setCount: (value: number) => void }) {
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count - 1)}>减1</button>
    </div>
  )
}

// 原服务端组件，仅处理静态内容或服务端数据
export default function ServerComponent() {
  // 示例：服务端数据获取
  const serverData = '从服务端获取的静态内容'
  return <div>服务端渲染内容：{serverData}</div>
}

2. 修改原客户端组件，直接引入拆分后的组件：

'use client'

import { useState } from 'react'
import ServerComponent from './ServerComponent'
import CountDependentClient from './CountDependentClient'

export default function ClientComponent() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ServerComponent />
      <CountDependentClient count={count} setCount={setCount} />
    </>
  )
}

方案二：使用Context共享客户端状态 #

通过React Context在客户端组件树中共享状态，让嵌入在服务端组件中的客户端子组件可以订阅并使用该状态。

1. 创建状态Context：

'use client'

import { createContext, useContext, useState, ReactNode } from 'react'

type CountContextType = {
  count: number
  setCount: (value: number) => void
}

const CountContext = createContext<CountContextType | undefined>(undefined)

// Context提供者组件
export function CountProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(0)
  return <CountContext.Provider value={{ count, setCount }}>{children}</CountContext.Provider>
}

// 自定义Hook，用于订阅Context
export function useCount() {
  const context = useContext(CountContext)
  if (!context) {
    throw new Error('useCount必须在CountProvider内部使用')
  }
  return context
}

2. 修改原客户端组件，使用Context获取状态：

'use client'

import { useCount } from './CountContext'

export default function ClientComponent({ children }: { children: React.ReactNode }) {
  const { count, setCount } = useCount()

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

3. 在服务端组件中嵌入需要使用状态的客户端组件：

// 服务端组件，无需'use client'
import CountDisplay from './CountDisplay'

export default function ServerComponent() {
  const serverData = '服务端渲染的静态数据'
  return (
    <div>
      <p>服务端内容：{serverData}</p>
      {/* 嵌入客户端组件，通过Context获取状态 */}
      <CountDisplay />
    </div>
  )
}

// CountDisplay.tsx - 客户端组件
'use client'

import { useCount } from './CountContext'

export function CountDisplay() {
  const { count } = useCount()
  return <p>当前计数（来自Context）：{count}</p>
}

4. 在页面组件（服务端组件）中挂载Context提供者：

// 页面组件，服务端组件
import { CountProvider } from './CountContext'
import ClientComponent from './ClientComponent'
import ServerComponent from './ServerComponent'

export default function Page() {
  return (
    <CountProvider>
      <ClientComponent>
        <ServerComponent />
      </ClientComponent>
    </CountProvider>
  )
}

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