Next.js中如何跨组件访问状态？含bgWhite共享及组件拆分场景

问题1：让Hello组件访问bgWhite状态实现背景色切换 #

通过props传递状态是最直接的方案，只需两步：

1. 在父组件Home中将bgWhite作为props传入Hello
2. 在Hello组件中接收props，根据状态值动态设置背景类名

修改后的代码 #

pages/index.js

import { useState } from "react";
import Hello from "../components/Hello";

export default function Home(props) {
  const [bgWhite, setBgWhite] = useState(true)
  return (
    <div>
      <div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div>
      <div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div>
      {/* 传递bgWhite状态给Hello组件 */}
      <Hello bgWhite={bgWhite} />
    </div>
  );
}

components/Hello.js

export default function Hello({ bgWhite }) {
  return(
    {/* 根据bgWhite切换背景色类名 */}
    <div className={`p-4 m-2 ${bgWhite ? 'bg-yellow-600' : 'bg-purple-600'} inline-block`}>
      <div>Hi</div>
    </div>
  )
}

问题2：封装背景控制组件后向Hello传递状态 #

这里有两种常用实现方式，核心都是通过父组件作为中转传递状态：

方式1：状态保留在父组件（推荐） #

将背景控制逻辑封装为BgToggle组件，接收父组件的状态和状态修改方法，状态变更后依然通过父组件传递给Hello。

新增components/BgToggle.js

export default function BgToggle({ bgWhite, setBgWhite }) {
  return (
    <div>
      <div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div>
      <div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div>
    </div>
  )
}

修改pages/index.js

import { useState } from "react";
import Hello from "../components/Hello";
import BgToggle from "../components/BgToggle";

export default function Home(props) {
  const [bgWhite, setBgWhite] = useState(true)
  return (
    <div>
      {/* 传递状态和修改方法给BgToggle */}
      <BgToggle bgWhite={bgWhite} setBgWhite={setBgWhite} />
      {/* 父组件中转状态给Hello */}
      <Hello bgWhite={bgWhite} />
    </div>
  );
}

Hello组件保持问题1中的修改即可。

方式2：子组件管理状态，通过回调传递给父组件 #

如果希望BgToggle自己管理状态，可通过回调函数将状态同步给父组件，再由父组件传递给Hello。

修改components/BgToggle.js

import { useState } from "react";

export default function BgToggle({ onBgChange }) {
  const [bgWhite, setBgWhite] = useState(true)
  
  const handleToggle = () => {
    const newState = !bgWhite
    setBgWhite(newState)
    // 通过回调将新状态传递给父组件
    onBgChange(newState)
  }

  return (
    <div>
      <div onClick={handleToggle} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div>
      <div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div>
    </div>
  )
}

修改pages/index.js

import { useState } from "react";
import Hello from "../components/Hello";
import BgToggle from "../components/BgToggle";

export default function Home(props) {
  const [bgWhite, setBgWhite] = useState(true)
  return (
    <div>
      {/* 传入回调函数接收子组件的状态变更 */}
      <BgToggle onBgChange={setBgWhite} />
      <Hello bgWhite={bgWhite} />
    </div>
  );
}

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