Question

有人可以告诉我是否有一种方法可以将深色变量从Navbar组件传递到App组件，这是我的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}>
  )
}

我想在dark组件中通过App进行更改，并使用它来更改类，或像这样style={ dark ? {backgroundColor : "#333"}一样切换背景 App组件：

function App() {

 return (
     <div className="App">
       <Body />
     </div>
   );
}

如果有人可以帮忙，我会感激的

Answer 1

这是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" />

Answer 2

尝试一下

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中进行访问的原因。您可以根据需要进行更改。

将数据从子组件传递到父组件/ React钩子

2 个答案: