在 React 中使用 useRef

Question

const App = () => {
    function hideCharacter(){
        const randomChar = useRef(null);
        randomChar.classList.add('hide');
    }
    return (
        <> 
            <RandomChar ref={randomChar} /> // error: not defined
            <button class="btn btn-primary" onClick={hideCharacter()}>Load another one</button>
        </>
    );
};

Why my ref is not defined? I need to refactor code to class?

Answer 1

You are breaking the React Hook Rules. Hooks should be declared in the functional component at top.

In your case you are declaring it inside a local function and it is not available outside that.

It has to be like:

const App = () => {
    const randomChar = useRef(null); // <---declare it here
    function hideCharacter(){        
        randomChar.classList.add('hide');
    }
    return (
        <> 
            <RandomChar ref={randomChar} /> // error: not defined
            <button class="btn btn-primary" onClick={hideCharacter()}>Load another one</button>
        </>
    );
};