将 onclick 函数加载作为 "function noop() {}"

Question

我不知道为什么会发生这种情况，但由于某种原因，在firefox中，我的react项目使用TSX在vite下运行。我试图运行这个功能上的点击/点击动态地改变标题和它做什么，当徽标被点击。这里的代码是:

function Logo() {
return (
<a
href={window.innerWidth > 600 ? "/home" : undefined}
onClick={() => {
if (window.innerWidth <= 600) {
// run your function here
if (document.getElementById("header")!.style.height === "3rem") {
document.getElementById("header")!.style.height = "100vh";
// document.getElementById('header')!.style.top = '3rem';
} else if (
document.getElementById("header")!.style.height === "100vh"
) {
document.getElementById("header")!.style.height = "3rem";
} else {
// Do something else if necessary
}
}
}}
>
<div>
<img
src="./src/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
alt="Reine Yurkowski's signature"
style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
/>
</div>
</a>
);
}

但由于某种原因，当我尝试从本地端口使用yarn dev运行它时，它加载为:"function noop() {}"。

它工作了一段时间，然后不知怎么的就放弃了，不再工作了。

我尝试做很多事情，比如让这个函数，只是调用它，在标签中编码它，使用gpt，和一堆其他的，但似乎没有工作，我似乎不能理解具体为什么会发生这种情况。

任何帮助都将非常感谢。

Answer 1

React元素的onClick属性与HTML元素的'onclick'属性不同。

React在幕后处理事件，在根元素，并将noop()处理程序附加到实际的HTML元素。

但是这些是你不应该关心的实现细节。

主要的问题很可能是你在手动操作DOM，这是你不应该在React中做的。

相反，你应该在onClick处理器中设置一些状态，并根据状态构建header组件(使用JSX，而不是DOM方法)。

。

const [ height, setHeight ] = useState('3rem');
// ...
<a href="..." onClick={ function(){
if( height === "3rem" ){
setHeight("100vh");
}
}} >
// ...
<MyHeader style={{ height: height }} />