Реагировать на загрузку функции onclick как «функция noop () {}»
Я понятия не имею, почему это происходит, но по какой-то причине в Firefox мой проект реагирования использует 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 и множество других, но, похоже, ничего не работает, и я не могу понять, почему именно это происходит.
любая помощь будет принята с благодарностью.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 }} />
Вы не должны манипулировать DOM в ответ. React использует нечто, называемое теневым домом legacy.reactjs.org/docs/faq-internals.html