reactjs中的响应式侧面导航栏答案

【问题标题】：responsive side navigation bar in reactjsreactjs中的响应式侧面导航栏
【发布时间】：2019-01-07 09:56:53
【问题描述】：

这是下面给出的代码，请帮助我，因为我在脚本标签上遇到错误，它可以在简单的 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;

【问题讨论】：

您收到的错误信息是什么？
./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 |
代码 sn-p 是从 .js 文件中获取的吗？还是 .html 文件？

标签： javascript jquery html css reactjs

【解决方案1】：

我认为错误的原因是结束卷曲不匹配。

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;

但是，示例中有一些反模式：

不要使用<script>标签：使用component methods。
不要使用document：要么使用状态（例如isOpen）来应用类或绑定宽度样式，要么使用refs。

【讨论】：