javascript - 未定义 React (NextJS) 函数
问题描述
我为我的个人网站制作了一个移动标题。仅在 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
解决方案
如果您想要导航中的功能,只需将其写入文件中即可。
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"
start 状态,然后当您单击 div 时,您会调用 setState as so setState({width: 0})
。
您可能想在此处阅读 React 文档中有关 state 和 setState() 的所有内容。https://reactjs.org/docs/state-and-lifecycle.html
推荐阅读
- graphql - 如何定义特定于 GraphQL 中两个节点的连接的值?
- javascript - Bokeh 中的自定义 javascript 回调以从数据框中选择列并更新绘图
- javascript - ReactJS - Array.map 和键的行为不明确
- python - SQLAlchemy - 如何创建没有项目的一对多关系?
- angular - Angular,有没有办法“markAsTouched”没有表单的字段?
- python - Python3.7 venv 不创建虚拟环境目录
- linux - 对“_gfortran_transfer_character_write”的未定义引用
- vba - Excel 复制到多个工作表
- keras - Keras - CNN 的训练和验证损失
- javascript - 关于使用 BST 在 javascript 中递归的初学者问题