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 組件，我們可以像你一樣在任何地方使用這個上下文

相對於初學者來說，從你的代碼看來，你明白你在做什么

關於您的評論 - 附上圖片