反应上下文/自己的钩子

Question

I am having a problem with importing HiddenProvider to App.js It gives me this bug "Attempted import error: 'HiddenProvider' is not exported from './HiddenContext'. I would be very grateful if I got some help. Thanks in Advance.

import React, { useState } from 'react';
export const HiddenContext =React.createContext(false)

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

    function handleClick (){
        setHideButton(true)
    }

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

import React, { useState } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import ImageComponent from './ImageComponent';
import { HiddenProvider } from './HiddenContext';
import { HiddenContext} from './HiddenContext';

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

export default App;

Answer 1

You are using useContext wrong. It has to be in a component that is inside/under the Provider . You could move useContext inside the ImageComponent . Or move the Provider into index.js .

see react docs: useContext