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

您正在违反反应挂钩规则。挂钩应在顶部的功能组件中声明。

在您的情况下，您是在本地函数中声明它，但在该函数外部不可用。

它必须像：

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

在React中使用useRef

1 个答案: