HandleClick未被识别为一个prop。

huangapple
go评论116阅读模式
英文:

HandleClick not being recognized as a prop

问题

我尝试让菜单在单击侧边栏时显示，但我遇到了一个错误：“react-dom.development.js:86 警告：React无法识别DOM上的handleClick属性”

  1. import { useState } from "react";
  2. import { NavLink } from "react-router-dom";
  3. import { RiCloseLine } from "react-icons/ri";
  4. import { HiOutlineMenu } from "react-icons/hi";
  5. import { logo } from "..//assets";
  6. import { links } from "../assets/constants";
  8. const NavLinks = ({ handleClick }) => (
  9.   <div className="mt-10 ">
  10.     {links.map((item) => (
  11.       <NavLink
  12.         className="flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover:text-cyan-400"
  13.         key={item.key}
  14.         to={item.to}
  15.         onClick={() => handleClick && handleClick()}
  16.       >
  17.         <item.icon className="w-6 h-6 mr-2" />
  18.         {item.name}
  19.       </NavLink>
  20.     ))}
  21.   </div>
  22. );
  24. const Sidebar = () => {
  25.   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  26.   return (
  27.     <>
  28.       <div className="md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
  29.         <img src={logo} alt="logo" className="w-full h-14 object-contain" />
  30.         <NavLinks />
  31.       </div>
  32.       <div className="absolute md:hidden block top-6 right-3 ">
  33.         {mobileMenuOpen ? (
  34.           <RiCloseLine
  35.             className="w-6 h-6 text-white mr-2"
  36.             handleClick={() => setMobileMenuOpen(false)}
  37.           />
  38.         ) : (
  39.           <HiOutlineMenu
  40.             className="w-6 h-6 text-white mr-2"
  41.             handleClick={() => setMobileMenuOpen(true)}
  42.           />
  43.         )}
  44.       </div>
  45.       <div
  46.         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
  47.         ${mobileMenuOpen ? "left-0" : "-left-full"}`}
  48.       >
  49.         <img src={logo} alt="logo" className="w-full h-14 object-contain" />
  50.         <NavLinks handleClick={() => setMobileMenuOpen(false)} />
  51.       </div>
  52.     </>
  53.   );
  54. };
  56. export default Sidebar;

我确定我遗漏了一个语法问题，但是重做了三次后我找不到它。

英文:

I'm trying to get my menu to show when I click the sidebar, but I'm getting an error "react-dom.development.js:86 Warning: React does not recognize the handleClick prop on a DOM "

  1. import { useState } from &quot;react&quot;;
  2. import { NavLink } from &quot;react-router-dom&quot;;
  3. import { RiCloseLine } from &quot;react-icons/ri&quot;;
  4. import { HiOutlineMenu } from &quot;react-icons/hi&quot;;
  5. import { logo } from &quot;..//assets&quot;;
  6. import { links } from &quot;../assets/constants&quot;;
  8. const NavLinks = ({ handleClick }) =&gt; (
  9.   &lt;div className=&quot;mt-10 &quot;&gt;
  10.     {links.map((item) =&gt; (
  11.       &lt;NavLink
  12.         className=&quot;flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover:text-cyan-400&quot;
  13.         key={item.key}
  14.         to={item.to}
  15.         onClick={() =&gt; handleClick &amp;&amp; handleClick()}
  16.       &gt;
  17.         &lt;item.icon className=&quot;w-6 h-6 mr-2&quot; /&gt;
  18.         {item.name}
  19.       &lt;/NavLink&gt;
  20.     ))}
  21.   &lt;/div&gt;
  22. );
  24. const Sidebar = () =&gt; {
  25.   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  26.   return (
  27.     &lt;&gt;
  28.       &lt;div className=&quot;md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]&quot;&gt;
  29.         &lt;img src={logo} alt=&quot;logo&quot; className=&quot;w-full h-14 object-contain&quot; /&gt;
  30.         &lt;NavLinks /&gt;
  31.       &lt;/div&gt;
  32.       &lt;div className=&quot;absolute md:hidden block top-6 right-3 &quot;&gt;
  33.         {mobileMenuOpen ? (
  34.           &lt;RiCloseLine
  35.             className=&quot;w-6 h-6 text-white mr-2&quot;
  36.             handleClick={() =&gt; setMobileMenuOpen(false)}
  37.           /&gt;
  38.         ) : (
  39.           &lt;HiOutlineMenu
  40.             className=&quot;w-6 h-6 text-white mr-2&quot;
  41.             handleClick={() =&gt; setMobileMenuOpen(true)}
  42.           /&gt;
  43.         )}
  44.       &lt;/div&gt;
  45.       &lt;div
  46.         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
  47.         ${mobileMenuOpen ? &quot;left-0&quot; : &quot;-left-full&quot;}`}
  48.       &gt;
  49.         &lt;img src={logo} alt=&quot;logo&quot; className=&quot;w-full h-14 object-contain&quot; /&gt;
  50.         &lt;NavLinks handleClick={() =&gt; setMobileMenuOpen(false)} /&gt;
  51.       &lt;/div&gt;
  52.     &lt;/&gt;
  53.   );
  54. };
  56. export default Sidebar;

I'm sure I'm missing a syntax issue, but I after redoing it 3 times I can't find it.

答案1

得分: 1

完整的警告信息如下：

警告：React 不识别 DOM 元素上的 handleClick 属性。如果您有意让它在 DOM 中显示为自定义属性，请将其拼写为小写的 handleclick。如果您是从父组件意外传递的，请从 DOM 元素中删除它。
在 svg
在 IconBase
在 HiOutlineMenu
在 div
在 Sidebar (https://gvq8pm.csb.app/src/App.js:42:67)
在 div
在 App
在 Router (https://gvq8pm.csb.app/node_modules/react-router/dist/index.js:911:18)
在 BrowserRouter (https://gvq8pm.csb.app/node_modules/react-router-dom/dist/index.js:627:18)

react-icon 图标组件将 handleClick 属性泄漏到 DOM 中，由于它是一个非标准的属性，因此会生成警告。请改用 onClick 属性，我认为您本来就应该使用它，因为 handleClick 不会切换任何东西。

英文:

The complete warning is:

> Warning: React does not recognize the handleClick prop on a DOM
> element. If you intentionally want it to appear in the DOM as a custom
> attribute, spell it as lowercase handleclick instead. If you
> accidentally passed it from a parent component, remove it from the DOM
> element.
> at svg
> at IconBase
> at HiOutlineMenu
> at div
> at Sidebar (https://gvq8pm.csb.app/src/App.js:42:67)
> at div
> at App
> at Router (https://gvq8pm.csb.app/node_modules/react-router/dist/index.js:911:18)
> at BrowserRouter (https://gvq8pm.csb.app/node_modules/react-router-dom/dist/index.js:627:18)

The react-icon icon components are leaking the handleClick prop out to the DOM and since it's a non-standard prop/attribute it generates the warning. Use the onClick prop instead, which I think you likely meant to use anyway since handleClick doesn't toggle anything.

  1. {mobileMenuOpen ? (
  2.   &lt;RiCloseLine
  3.     className=&quot;w-6 h-6 text-white mr-2&quot;
  4.     onClick={() =&gt; setMobileMenuOpen(false)}
  5.   /&gt;
  6. ) : (
  7.   &lt;HiOutlineMenu
  8.     className=&quot;w-6 h-6 text-white mr-2&quot;
  9.     onClick={() =&gt; setMobileMenuOpen(true)}
  10.   /&gt;
  11. )}

huangapple
  • 本文由 发表于 2023年5月26日 09:55:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/76337195.html
  • javascript
  • react-hooks
  • react-native
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定