Question

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

Answer 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。
< / li>

reactjs中的响应式侧面导航栏

1 个答案: