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

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

未定义React（NextJS）函数

1 个答案: