[英]How to access a state of an component from another component in next.js?
I have a boolean state of bgWhite.我有一个 bgWhite 的布尔状态。 If it changes, I change the background colour.
如果它改变,我改变背景颜色。 This all is in the index.js file in the pages directory.
这一切都在 pages 目录中的 index.js 文件中。
How can I access the state bgWhite from the component to do something such as changing the bg color?如何从组件访问状态 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>
);
}
The <Hello />
component: <Hello />
组件:
export default function Hello() {
return(
<div className="p-4 m-2 bg-yellow-600 inline-block">
<div>Hi</div>
</div>
)
}
Also, if I happen to make the background colour changing div into another component taking the state with it, then how can I access the state from that component to the <Hello />
component?另外,如果我碰巧将背景颜色更改 div 变成了另一个带有它的状态的组件,那么我如何从该组件访问状态到
<Hello />
组件?
In correct in new ustate在新州正确
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>
); ); }
}
Since Hello
component is a child of your index.js
page component you can just pass the state and the setState
function via props
, it's the easiest way for the example you are providing and I guess this is what you are looking to do.由于
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>
);
}
Then, receive those props in your component and use them as you need:然后,在您的组件中接收这些道具并根据需要使用它们:
export default function Hello({bgWhite, setBgWhite}) {
return(
<div className="p-4 m-2 bg-yellow-600 inline-block">
<div>Hi</div>
</div>
)
}
If you take the div
that changes it's background color along with the state to another component, you would need to think a bit more how would you pass that state to the Hello
component.如果您将更改其背景颜色的
div
连同状态一起转移到另一个组件,您需要多考虑一下如何将该状态传递给Hello
组件。 You could make Hello
a child of the new component you are talking about or use Context
API to access that state anywhere in your app.您可以让
Hello
成为您正在谈论的新组件的子组件,或者使用Context
API 在应用程序的任何位置访问该状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.