React的新特性,并试图在React中编写我的脚本,但不知道该怎么做。我尝试过使用状态,但这只是让我更加困惑。下面的代码是我可能通常创建的一些示例。将JavaScript转换为使用React组件
这里是我的脚本:
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类到汉堡包和一些其他元素。 –