React Context API + 钩子

Question

我对 Context API 还很陌生。 所以bassicaly，我希望当我按下ButtonComponent 中的Button 时，ButtonComponent 中的所有东西在ImageComponent 中都消失了，但是当我点击Button 时，什么也没有发生。 我有点坚持这一点，如果可能的话，如果有人帮助我，我将不胜感激。 提前致谢！

//HiddenContext
import React from "react";
export const HiddenContext = React.createContext(false);

function HiddenProvider({ children }) {
  const [hideButton, setHideButton] = React.useState(false);

  function handleClick() {
    setHideButton(true);
  }

  return (
    <HiddenContext.Provider value={{ hideButton, handleClick }}>
      {children}
    </HiddenContext.Provider>
  );
}


// App Component/Parent
import React, { useState } from 'react';
import './App.css';
export const HiddenContext = React.createContext(false);
function HiddenProvider({ children }) {
  const [hideButton, setHideButton] = React.useState(false);

  function handleClick() {
    setHideButton(true);
  }

  return (
    <HiddenContext.Provider value={{ hideButton, handleClick }}>
      {children}
    </HiddenContext.Provider>
  );
}

 function App() {
  const { hideButton } = React.useContext(HiddenContext);
  return (
    <HiddenProvider>
      <div className="App">
        <ImageComponent hideButton={hideButton} /> 
      </div>
    </HiddenProvider>
  );
}


//ButtonComponent
import React, {useState,ReactFragment} from 'react'
import { HiddenContext, } from './HiddenContext';
function ButtonComponent() {
  const { hideButton, handleClick } = React.useContext(HiddenContext);

  return (
    <React.Fragment>
      {!hideButton && (
        <li>
          <img className="image" src="./icons" alt="" />
          <Button
            onClick={handleClick}
            variant="outlined"
            className="button__rightpage"
          >
            Hide
          </Button>
          <caption className="text"> Hide</caption>
        </li>
      )}
    </React.Fragment>
  );
}

// ImageComponent
import React, {useState, ReactFragment} from 'react'
import { HiddenContext, } from './HiddenContext';
const ImageComponent = () => {
  const { hideButton } = React.useContext(HiddenContext);
  return (
    <div>
      {!hideButton && (
        <React.Fragment>
          <img src="icons/icon.png" alt="" />
          <caption>Image </caption>
        </React.Fragment>
      )}
    </div>
  );
};

Answer 1

您正在尝试访问提供程序之外的上下文值（在App ）。 尝试从App删除它，如下所示：

 function App() {
   return (
     <HiddenProvider>
       <div className="App">
           <ImageComponent  /> 
       </div>
     </HiddenProvider>
   );
}

Answer 2

我们在这里创建了 2 个上下文 - 而不是 1

我制作了一个代码发送框供我们查看修复。

https://codesandbox.io/s/focused-night-i95fr

我们应该只创建一次上下文，用提供者包装 App 组件，我们可以像你一样在任何地方使用这个上下文

相对于初学者来说，从你的代码看来，你明白你在做什么

关于您的评论 - 附上图片