我正在努力将我的普通 jQuery 代码转换为 React JS(我是 React 新手)。
我有以下代码:
$(".add").click(function () {
$("nav").addClass("show");
});
$(".remove").click(function () {
$("nav").removeClass("show");
});
$(".toggle").click(function () {
$("nav").toggleClass("show");
});
nav {
width: 250px;
height: 150px;
background: #eee;
padding: 15px;
margin-top: 15px;
}
nav.show {
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="add">Add</button>
<button class="remove">Remove</button>
<button class="toggle">Toggle</button>
<nav>Navigation menu</nav>
尝试过的引用似乎只为同一元素添加/删除类:
https://stackoverflow.com/a/42630743/6191987 https://stackoverflow.com/a/42630743/6191987
如何在 ReactJS 中添加或删除事件上的类名? https://stackoverflow.com/q/28732253/6191987
那么,如何将相同的 jQuery 方法转换或创建为 ReactJS?
- 使用状态来跟踪是否显示导航。
- 在react代码中使用与状态对应的类名。
- React 使用“className”而不是“class”,因为“class”已经是 javascript 中的保留字。
你可以检查这个用于实施的沙盒链接 https://codesandbox.io/s/relaxed-sanne-uuigt?file=/src/App.js
function App() {
const [show, setShow] = React.useState();
return (
<div className="App">
<button className="add" onClick={() => setShow(true)}>
Add
</button>
<button className="remove" onClick={() => setShow(false)}>
Remove
</button>
<button className="toggle" onClick={() => setShow(!show)}>
Toggle
</button>
<nav className={show ? "show" : ""}>Navigation menu</nav>
</div>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)