如何從 next.js 中的另一個組件訪問組件的狀態？

Question

我有一個 bgWhite 的布爾狀態。 如果它改變，我改變背景顏色。 這一切都在 pages 目錄中的 index.js 文件中。

如何從組件訪問狀態 bgWhite 以執行諸如更改 bg 顏色之類的操作？

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>
      <Hello />
    </div>
  );
}

<Hello />組件：

export default function Hello() {
  return(
    <div className="p-4 m-2 bg-yellow-600 inline-block">
      <div>Hi</div>
    </div>
  )
}

另外，如果我碰巧將背景顏色更改 div 變成了另一個帶有它的狀態的組件，那么我如何從該組件訪問狀態到<Hello />組件？

Answer 1

在新州正確

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


export default function Home(props) {

const [bgWhite, setBgWhite] = useState(true)
const {hello} = useState(Hello) 

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>
  <Hello />
</div>

); }

Answer 2

由於Hello組件是您的index.js頁面組件的子組件，您可以通過props傳遞狀態和setState函數，這是您提供的示例最簡單的方法，我想這就是您想要做的。

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>
      <Hello bgWhite={bgWhite} setBgWhite={setBgWhite} />
    </div>
  );
}

然后，在您的組件中接收這些道具並根據需要使用它們：

export default function Hello({bgWhite, setBgWhite}) {
  return(
    <div className="p-4 m-2 bg-yellow-600 inline-block">
      <div>Hi</div>
    </div>
  )
}

如果您將更改其背景顏色的div連同狀態一起轉移到另一個組件，您需要多考慮一下如何將該狀態傳遞給Hello組件。 您可以讓Hello成為您正在談論的新組件的子組件，或者使用Context API 在應用程序的任何位置訪問該狀態。