React (NextJS) 函数未定义

Question

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

激活移动导航后，用户可以单击菜单按钮打开侧边导航。这应该适用于每个 onClick，但每次我尝试它时，它都会显示 "Cannot read property 'closeNav' of undefined".

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

这是导航+手机导航

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() 来改变你的应用程序的状态。因此，在您的情况下，您可能会将 div 的宽度存储为 width: "25rem" 状态以开始，然后当您单击 div 时，您将调用 setState setState({width: 0}) .

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

React (NextJS) 函数未定义

React (NextJS) function not defined

javascript

html

css

reactjs

next.js