javascript - reactjs中的响应式侧边导航栏
问题描述
这是下面给出的代码,请帮助我,因为我在脚本标签上遇到错误,它可以在简单的 html 文件上轻松运行,但不能在 reactjs 中运行。
当我启动 npm 时,它显示行号。这是有错误,它不运行
./src/topbar/Navbar.js 语法错误:C:/Users/root/mft/src/topbar/Navbar.js:意外令牌,预期 } (34:62) 32 | 33 | 函数 openNav() { > 34 | document.getElementById("mySidenav").style.width = "250px"; | ^ 35 | document.getElementById("box1").style.width = "100%"; 36 | 37 |
import React from 'react';
import './Navbar.css';
class Navbar extends React.Component {
render(){
return(
<div id = "navbar">
<div class ="box">
<div class="side" onclick={openNav()}>
<div class="line-separator"></div>
<div class="line-separator"></div>
<div class="line-separator"></div>
</div>
<h1 class="right">A1MAN </h1>
<div class="text">
<h1>A1MAN </h1>
</div>
</div>
<div id="box1" class="back">
<div href class="closebtn" onclick={closeNav()}></div>
</div>
<div id="mySidenav" class="sidenav">
<a href="">About</a>
<a href="">Services</a>
<a href="">Clients</a>
<a href="">Contact</a>
</div>
<img alt="flower" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg"/>
<script>
</script>
</div>
);
function openNav() {
document.getElementById("mySidenav").style.width="250px";
document.getElementById("box1").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("box1").style.width = "0";
}
}
}
export default Navbar;
解决方案
我认为错误的原因是结束卷曲不匹配。
import React from 'react';
import './Navbar.css';
class Navbar extends React.Component {
render() {
return (
<div id = "navbar">
...
<img alt="flower" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg"/>
</div>);
} // <-------------------------------- This was misplaced
// These methods belong on the component class, not inside a script tag
openNav() {
document.getElementById("mySidenav").style.width="250px";
document.getElementById("box1").style.width = "100%";
}
closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("box1").style.width = "0";
}
}
export default Navbar;
但是,示例中有一些反模式:
推荐阅读
- regex - 如何使正则表达式工作以查找以 A 开头的 7 个字母单词
- html - 如何设置边框按钮的样式以使其宽度与 CSS 中的上述文本匹配?
- python - 当一个人有正确的答案时,我正在尝试增加一个价值
- mrtk - 缺少主摄像机引用脚本
- angular - Angular RXJS Observables - ObjectUnsubscribedError
- javascript - 基于样式的组件库中的主题 [React]
- spring - 通过 Spring Boot OAuth2 登录从 DB 获取 Principal
- javascript - SyntaxError:返回的意外令牌(61:16)(...)
- javascript - 使用 fullPage.js 在部分之间剪切路径转换
- c - 你能 typedef 一个以前 typedef'd 的语句吗?