React开发移动端菜单出现Uncaught TypeError报错该如何解决？

存在的问题 #

• 子组件props接收错误：React 函数组件的第一个入参是整体的props对象，不能直接拆分两个参数接收，需要对props对象做解构才能拿到对应的传入属性
• 点击事件回调未执行：你在i标签的onClick里写的() => clickMenuHandler 只是返回了函数本身，没有调用，点击的时候不会触发状态更新
• 菜单切换函数冗余且参数冲突：clickMenuHandler的入参名和你定义的state变量menuIsClicked重名，会导致内部无法正确读取state值，实际上切换布尔值的状态可以直接用函数式更新简化写法
• 你提到的target.className.indexOf is not a function报错，大概率是代码其他位置（比如报错信息里的triggerTranslation相关逻辑）尝试对非字符串类型的className调用字符串方法，先修复下面的语法问题后如果还有报错可以排查相关位置的className赋值逻辑

修复后完整代码 #

import { useState, useContext } from 'react'
// 请补充你自己项目里的对应引入路径
import { AuthContext } from '你的AuthContext路径'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faListUl } from '@fortawesome/free-solid-svg-icons'

function Header() {
  const [menuIsClicked, setmenuIsClicked] = useState(false)
  const auth = useContext(AuthContext)
  // 简化切换逻辑，不需要额外传参
  const clickMenuHandler = () => {
    setmenuIsClicked(prevState => !prevState)
  }
 
  return (
    <>
      <header className="hd-home">
        <MenuForMobiles menuIsClicked={menuIsClicked} clickMenuHandler={clickMenuHandler} />
        <div className="nav-link1">
          <a href="/" className="nv-btn">Home</a>
          <a href="" className="nv-btn">About</a>
          <a href="" className="nv-btn">Donate</a>
        </div>
        <div className="nav-link2">
          <a href="/donate" className="nv-btn">Profile</a>
          <a className="nv-btn" href="">Exit</a>
        </div>
      </header>
      {/* 注意这里空href的a标签点击会刷新页面，建议补充正确路径或者替换成其他元素 */}
      <a href="">
        <WeeklyNews />
      </a>
    </>
  )
}

// 解构props拿到对应的传入属性
function MenuForMobiles({ menuIsClicked, clickMenuHandler }) {
  if (menuIsClicked) {
    return (
      <div className="m-o"
        style={{
          backgroundColor: 'pink',
          width: '100vw !important',
          height: '100vh !important',
        }}>
        {/* 修复点击回调，直接绑定函数即可 */}
        <i onClick={clickMenuHandler}>
          <FontAwesomeIcon icon={faListUl} />
        </i>
      </div >
    )
  }
  return (
    <div className="m-o">
      <FontAwesomeIcon icon={faListUl} />
    </div>
  )
}

内容的提问来源于stack exchange，提问作者n33t