Javascript React钩子必须以完全相同的顺序调用，但我遇到了一个异常

我已经理解了“React Hook必须以完全相同的顺序调用。”

所以我认为在下面的例子中，这可能是一个错误

export default function(onClick) {
    if (typeof onClick !== "function") {
        return;
    }
    const element = useRef();
    useEffect(() => {
        if (element.current) {
            element.current.addEventListener("click", onClick);
            element.current.style.cursor = "pointer";
        }
        return () => {
            if (element.current) {
                element.current.removeEventListener("click", onClick);
            }
        };
    }, []);
    return element;
}

但是这个代码有效！我不知道为什么。。。我还有一个，这让我发疯

看看这个案例：

export default function onClick(onClick) {
    if (typeof onClick !== "function") {
        return;
    }
    const element = useRef();
    useEffect(() => {
        if (element.current) {
            element.current.addEventListener("click", onClick);
            element.current.style.cursor = "pointer";
        }
        return () => {
            if (element.current) {
                element.current.removeEventListener("click", onClick);
            }
        };
    }, []);
    return element;
}

我刚刚命名了函数，它给我一个错误

请让我知道为什么大写的钩子不是错误

---

我明白了

这只是埃斯·林特的错误

---

cf）

只需更改if块的顺序

不要在循环、条件或嵌套函数中调用钩子。相反，总是在React函数的顶层使用钩子。您可以按照此处的文档进行操作

export default function(onClick) {
    
    const element = useRef();
    useEffect(() => {
        if (element.current) {
            element.current.addEventListener("click", onClick);
            element.current.style.cursor = "pointer";
        }
        return () => {
            if (element.current) {
                element.current.removeEventListener("click", onClick);
            }
        };
    }, []);
    return element;

if (typeof onClick !== "function") {
        return;
    }

}

---

尝试将组件名称更改为

OnClick

，组件名称应使用pascal casingI，但它仍发送错误…我不明白您遇到了什么错误。我认为您必须显示错误消息和更多代码来诊断问题。这应该是一个组件吗？您不应该返回DOM吗？我的错误消息只是第13:18行：React Hook“useRef”被有条件地调用。在每个组件渲染中，必须以完全相同的顺序调用React挂钩。你是不是在早归后不小心打电话给了React Hook？反应钩子/钩子规则，我知道为什么这是一个错误，我只想知道当我用匿名函数导出钩子时，它是如何工作的，比如first caseOk I will。。谢谢..！！：）但我的问题是匿名函数中的case！很抱歉，我不能理解这个问题。只有React函数的调用钩子，而不是常规JavaScript函数的调用钩子。相反，您可以：✅ 来自React函数组件的调用挂钩。✅ 从定制钩子调用钩子（我们将在下一页了解它们）。