有人能告诉我是否有办法将暗变量从Navbar组件传递到应用程序组件吗？这里是我的Navbar组件的一小部分，它包含状态：
function Navbar({search, handleSearch, region, handleChange, number}){
const [dark , setDark] = useState(false)
function handlThem(){
setDark(prevThem=> !prevThem )
}
return(
<div className="navbar" style={ dark ? {backgroundColor : "#333"} : null}>
)
}
我想在App组件中传递dark以进行更改，并使用它来更改它的类或切换以更改背景，如style={ dark ? {backgroundColor : "#333"}应用程序组件：
function App() {
return (
<div className="App">
<Body />
</div>
);
}
这是React Context的一个很好的用例。我提供了一个使用hooks API的示例。您可以创建一个上下文，然后在使用提供程序包装的任何组件中使用值(状态和状态设置器(。
const ThemeContext = React.createContext();
function App() {
const [dark , setDark] = React.useState(false);
return (
<ThemeContext.Provider value={{ dark, setDark }}>
<Body />
</ThemeContext.Provider>
);
}
function Navbar() {
const value = React.useContext(ThemeContext);
return (
<div>Navbar<button onClick={() => value.setDark(true)}>Change to Dark</button></div>
);
}
function Body() {
const value = React.useContext(ThemeContext);
return (
<div style={ value.dark ? {backgroundColor : "#333"} : null}>
<Navbar />
<div>Rest of the body</div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />试试这个
App.js
function App() {
function getTheme(themeValue) {
console.log(themeValue);
}
return (
<div className="App">
<Body getTheme={getTheme}/>
</div>
);
}
Navbar.js
function Navbar({search, handleSearch, region, handleChange, number, getTheme}){
const [dark , setDark] = useState(false)
function handlThem(){
const theme = !dart;
setDark(prevThem=> theme )
getTheme(theme);
}
return(
<div className="navbar" style={ dark ? {backgroundColor : "#333"} : null}>
)
}
当我传递到body时，你传递到Navbar组件，你没有发布body组件，这就是为什么传递到body组件并在Navbar中访问。您可以根据自己的要求进行更改。