Reactでスクリプトを作成していますが、それを行う方法はわかりません。私は状態を使用しようとしましたが、もっと混乱してしまいました。以下のコードは、私がよく作るかもしれないもののサンプルです。 JavaScriptをReactコンポーネントで使用するためにJavaScriptを変換する
const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function() {
hamburger.classList.toggle("is-active");
document.querySelector(".navigation").classList.toggle("slide-in");
document.querySelector("body").classList.toggle("menu-active");
document.querySelector(".shell-ui-main").classList.toggle("menu-overlay");
});
はここで基本的にはナビゲーションバー用のコンポーネントを反応させます:
は、ここに私のスクリプトです
import React from 'react';
export default class NavComponent extends React.Component {
render() {
return (
<div className="container">
<button className="hamburger hamburger--squeeze" type="button">
<span className="hamburger-box">
<span className="hamburger-inner"></span>
</span>
</button>
<a className="logo-link" href="/">
<img width="94" height="31" src="/img/logos/logo.png" srcSet="/img/logos/logo.png 1x, /img/logos/[email protected] 2x, /img/logos/[email protected] 3x"
alt="logo" className="logo" />
</a>
<nav className="navigation">
<ul className="nav">
<li className="single-item">
<a href="/">Home</a>
</li>
<li className="single-item">
<a href="#">Item 2</a>
</li>
<li className="single-item">
<a href="#">Item 3</a>
</li>
<li className="single-item">
<a href="#">Item 4</a>
</li>
</ul>
</nav>
</div>
);
}
}
これは、htmlの書式設定の方法が異なるように思われますが、言及された最初のスクリプトにあまり対応していないようです。間違いなく私はそのクリーナーを感じるようにユーザーにconstに行く。 たとえば、スクリプトはis-activeクラスの追加をハンバーガーと他のいくつかの要素に切り替えます。 –