Question

我在将HiddenProvider导入App.js时遇到问题，它给了我这个错误“尝试导入错误：'HiddenProvider'不是从'./HiddenContext'中导出的。如果能获得帮助，我将非常感谢。谢谢提前。

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

您使用的useContext错误。它必须位于Provider内/下的组件中。您可以在useContext内移动ImageComponent。或将Provider移至index.js。

请参阅react docs：useContext

反应上下文/自己的钩子

1 个答案: