未定义React（NextJS）函数

Question

我正在为我的个人网站制作移动标题。 仅在HTML，CSS和JS中它很简单，但在React中却有所不同，我不知道如何更改我的JS部分。

激活移动导航后，用户可以单击菜单按钮以打开侧面导航。 这应该对每个onClick有效，但是每次尝试时，它都会显示“无法读取未定义的属性'closeNav'”。

我尝试了不同的版本，主要来自stackoverflow，但没有任何效果。

这是导航+移动导航

 import Link from 'next/link' import Main from './main' const Navigation = () => ( <div> <header className="global-nav"> <div className="wrapper"> <Link href="/"><div className="logo-header"><a className="logo-global"></a></div></Link> <nav> <ul> <li><Link href="/"><a>Home</a></Link></li> <li><Link href="/about"><a>Über mich</a></Link></li> <li><Link href="/leistungen"><a>Leistungen</a></Link></li> <li><Link href="/referenzen"><a>Referenzen</a></Link></li> <li><Link href="/blog"><a>Blog</a></Link></li> </ul> </nav> </div> </header> <header className="mobile-global-nav"> <nav className="menu" id="menu-mobile"> <a onClick={this.closeNav} href="javascript:void(0)" className="menu-close menu-icons"> <i className="fas fa-times"></i> </a> <ul className="nav-mobile"> <a onClick={this.closeNav} href="javascript:void(0)" className="menu-close menu-icons"> </a> <li> <a onClick={this.closeNav} href="javascript:void(0)" className="menu-close menu-icons"></a> <a href="/">Home</a> </li> <li> <a href="/about">Über mich</a> </li> <li> <a href="/leistungen">Leistungen</a> </li> <li> <a href="/referenzen">Referenzen</a> </li> <li> <a href="/blog">Blog</a> </li> </ul> </nav> <section className="items"> <div className="wrapper"> <a onClick={this.openNav} href="javascript:void(0)" className="menu-icons"> <i className="fas fa-bars"></i> </a> <a href="/" className="logo-mobile"></a> </div> </section> </header> </div> ) export default Navigation 

那就是我尝试的最后一个版本：

 const Main = () => ( function openNav() { document.getElementById("menu-mobile").style.width = "25rem"; }, function closeNav() { document.getElementById("menu-mobile").style.width = "0"; } ) export default Main 

Answer 1

如果您想要导航中的功能，只需将其写入文件中即可。

const openNav = () => document.getElementById("menu-mobile").style.width = "25rem";
const closeNav = () => document.getElementById("menu-mobile").style.width = "0";

const Navigation = () => (
  <div>
      <header className="global-nav">
      ......

如果您特别想从另一个文件导入它，则只需从另一个javascript文件导出即可。 创建一个文件functions.js并编写

export const openNav = () => document.getElementById("menu-mobile").style.width = "25rem";
export const closeNav = () => document.getElementById("menu-mobile").style.width = "0";

然后只需从该文件导入这些功能

import { openNav, closeNav } from "./functions";

然后，您可以不使用this调用closeNav

综上所述，通常在React中，您不会直接操作DOM，而是可能想要创建一个Class组件，创建一个状态对象并使用setState（）来更改应用程序的状态。 因此，在您的情况下，您可能会以状态状态将div的宽度存储为width: "25rem" ，然后在单击div时将setState称为setState({width: 0}) 。

您可能需要在此处的React文档中阅读有关state和setState（）的所有信息。 https://reactjs.org/docs/state-and-lifecycle.html