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

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}>
  )
}

我想在App组件中传递dark以更改并使用它来更改它的类或切换以更改背景，例如style={ dark ? {backgroundColor : "#333"} style={ dark ? {backgroundColor : "#333"}应用组件：

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

尝试这个

应用程序.js

function App() {
 function getTheme(themeValue) {
   console.log(themeValue);
 }
 return (
     <div className="App">
       <Body getTheme={getTheme}/>
     </div>
   );
}

导航栏.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 个解决方案

解决方案1
3 2020-10-17 21:48:40

解决方案2
1 2020-10-17 21:24:51

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

问题描述

2 个解决方案

解决方案1 3 2020-10-17 21:48:40

解决方案2 1 2020-10-17 21:24:51

解决方案1
3 2020-10-17 21:48:40

解决方案2
1 2020-10-17 21:24:51