在 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>        </>    );};为什么我的引用没有定义？我需要将代码重构为类吗？

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>

        </>

    );

};