反应上下文 API + 钩子

Question

我对 Context API 比较陌生。因此，基本上，当我按下 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

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

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

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

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

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

关于您的评论 - 附上图片

Answer 2

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

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