React警告：handleClick未被识别为DOM属性的问题排查

错误提示 #

react-dom.development.js:86 Warning: React does not recognize the <code>handleClick</code> prop on a DOM

问题代码 #

import { useState } from "react";
import { NavLink } from "react-router-dom";
import { RiCloseLine } from "react-icons/ri";
import { HiOutlineMenu } from "react-icons/hi";
import { logo } from "../assets";
import { links } from "../assets/constants";

const NavLinks = ({ handleClick }) => (
  <div className="mt-10 ">
    {links.map((item) => (
      <NavLink
        className="flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover:text-cyan-400"
        key={item.key}
        to={item.to}
        onClick={() => handleClick && handleClick()}
      >
        <item.icon className="w-6 h-6 mr-2" />
        {item.name}
      </NavLink>
    ))}
  </div>
);

const Sidebar = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <>
      <div className="md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
        <img src={logo} alt="logo" className="w-full h-14 object-contain" />
        <NavLinks />
      </div>
      <div className="absolute md:hidden block top-6 right-3 ">
        {mobileMenuOpen ? (
          <RiCloseLine
            className="w-6 h-6 text-white mr-2"
            handleClick={() => setMobileMenuOpen(false)}
          />
        ) : (
          <HiOutlineMenu
            className="w-6 h-6 text-white mr-2"
            handleClick={() => setMobileMenuOpen(true)}
          />
        )}
      </div>
      <div
        className={`absolute top-0 h-screen w-2/3 bg-gradient-to-tl from-white/10 to-[#483d8b] backdrop-blur-lg z-10 p-6 md:hidden smooth-transition
        ${mobileMenuOpen ? "left-0" : "-left-full"}`}
      >
        <img src={logo} alt="logo" className="w-full h-14 object-contain" />
        <NavLinks handleClick={() => setMobileMenuOpen(false)} />
      </div>
    </>
  );
};

export default Sidebar;

解决方法 #

错误出在移动端菜单按钮部分：你给RiCloseLine和HiOutlineMenu这两个图标组件传递了handleClick属性，但这类图标组件最终会渲染成原生DOM元素（比如<svg>），React不允许给原生DOM元素传递自定义属性，因此触发警告。

只需要把handleClick改成标准的onClick属性即可，图标组件支持接收onClick事件处理器：

修改后的移动端按钮代码：

<div className="absolute md:hidden block top-6 right-3 ">
  {mobileMenuOpen ? (
    <RiCloseLine
      className="w-6 h-6 text-white mr-2"
      onClick={() => setMobileMenuOpen(false)}
    />
  ) : (
    <HiOutlineMenu
      className="w-6 h-6 text-white mr-2"
      onClick={() => setMobileMenuOpen(true)}
    />
  )}
</div>

修改后警告会消失，菜单开关功能也能正常工作。

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