在 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>
        </>
    );
};

為什么我的 ref 沒有定義？ 我需要重構代碼來上課嗎？

Answer 1

你違反了 React Hook 規則。 鈎子應該在頂部的功能組件中聲明。

在您的情況下，您是在本地函數中聲明它，並且在該函數之外不可用。

它必須是這樣的：

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>
        </>
    );
};