Блог

Я довольно новичок в Context API. Итак, я хочу, чтобы при нажатии на кнопку в ButtonComponent все в ButtonComponent также исчезало в ImageComponent, но когда я нажимаю на кнопку, ничего не происходит. Я как бы застрял в этом, я был бы очень благодарен, если бы кто-нибудь помог мне, если это возможно. Заранее спасибо!

 //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 amp;amp; (
        <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 amp;amp; (
        <React.Fragment>
          <img src="icons/icon.png" alt="" />
          <caption>Image </caption>
        </React.Fragment>
      )}
    </div>
  );
};
  

Мы создали здесь 2 контекста вместо 1

Я создаю codesendbox, чтобы мы могли увидеть исправление.

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

Мы должны создать контекст только один раз, чтобы обернуть компонент приложения поставщиком, и мы можем использовать этот контекст, как вы, везде, где мы хотим

И относительно новичка, из вашего кода кажется, что вы понимаете, что делаете

о вашем комментарии — прикрепил картинку

Вы пытаетесь получить доступ к значению контекста вне поставщика (в App ). Попробуйте удалить это из App , например, так:

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