next.js 如何在react客户端组件与父服务器组件之间共享状态？

wz1wpwve 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(135)

在我的next.js应用程序中，我有一个包含两个组件的页面：A和B中的至少一个。

// page.tsx

import A from './A'
import B from './B'

const Page = () => {
  return (
    <div>
      <A />
      <B />
    </div>
  )
}

export default Page

// A.tsx

'use client';

import { useState } from 'react'

const A = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>you clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>click me</button>
    </div>
  )
}

export default A

// B.tsx

'use client';

import { useState } from 'react'

const B = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>you clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>click me</button>
    </div>
  )
}

export default B

假设我想在服务器上静态呈现Page。但是，我也想在客户端实现状态。同步A和B的状态，同时保持Page作为服务器组件的最佳方法是什么？

next.js

来源：https://stackoverflow.com/questions/76649782/how-to-share-state-between-react-client-components-with-a-parent-server-componen

1条答案

按热度按时间

mzmfm0qo1#

您可以使用上下文API来实现这一点。您可以在客户端组件中呈现您的上下文提供程序，并将其注入到页面中：

// page.tsx
// ...

const Page = () => {
  return (
    <MyProvider>
      <A />
      <B />
    </MyProvider>
  )
}

// ...

字符串
上下文可能看起来像这样：

// CountProvider.tsx

"use client";

interface CountContextType {
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
}

export const CountContext = createContext<CountContextType>({
  count: 0,
  setCount: () => {},
});

export default function CountProvider({children}: {children: React.ReactNode}) {
  const [count, setCount] = useState<number>(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

型
最后，您可以从子组件访问和修改相同的上下文计数，从而有效地共享状态。例如，在组件A中，而不是使用：

const [count, setCount] = useState(0);

型
您可以用途：

const {count, setCount} = useContext(CountContext);

型

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 如何在react客户端组件与父服务器组件之间共享状态？

1条答案

相关问题

热门标签

最新问答