未定义 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";

然后您只需调用closeNav 而不使用this

说了这么多，通常在 React 中，您不会直接操作 DOM，而是可能想要创建一个 Class 组件，创建一个状态对象并使用 setState() 来更改应用程序的状态。因此，在您的情况下，您可能会将状态为width: "25rem" 的 div 的宽度存储为开始，然后当您单击 div 时，您将调用 setState ，就像setState({width: 0}) 一样。

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