警告：收到非布尔属性“className”的“false”。如果要将其写入 DOM，请改为传递字符串：className="false" 或答案

【问题标题】：Warning: Received `false` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="false" or警告：收到非布尔属性“className”的“false”。如果要将其写入 DOM，请改为传递字符串：className="false" 或
【发布时间】：2021-07-13 06:20:38
【问题描述】：

我知道很多人已经问过同样的问题，但他们的回答都对我有用...

我遇到了这个错误：

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.
    at a
    at Link (webpack-internal:///./node_modules/next/dist/client/link.js:79:19)
    at li
    at SellerSidebarData (webpack-internal:///./components/sellercomp/SSData.js:17:3)
    at ul
    at div
    at div
    at SellerSidebar (webpack-internal:///./components/sellercomp/SellerSidebar.js:31:20)
    at div
    at SellerLayout (webpack-internal:///./components/sellercomp/SellerLayout.js:22:3)
    at MyApp (webpack-internal:///./pages/_app.js:55:3)
    at AppContainer (/node_modules/next/dist/next-server/server/render.js:27:952)

这是我的代码：

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const SellerSidebarData = ({ classPath, path, icon, title }) => {
  const router = useRouter();

  return (
    <li>
      <Link href={path}>
        <a
          className={
            router.pathname == classPath &&
            'wave-effect waves-effect waves-button active'
          }
        >
          <i aria-hidden className={`width18 textCenter ${icon}`}></i>
          {title}
        </a>
      </Link>
    </li>
  );
};

export default SellerSidebarData;

顺便说一句，我知道三个文件有错误，但如果你能回答我给的代码，我很可能会回答其他文件...提前非常感谢！！！

【问题讨论】：

如果您过去使用className={condition && value} 有条件地省略它，请改为通过className={condition ? value : undefined}。

标签： javascript reactjs next.js

【解决方案1】：

当router.pathname == classPath 评估为假时，您正在向 DOM 泄漏一个布尔值。使用三元组为虚假路径返回一个空字符串类名。

<Link href={path}>
  <a
    className={
      router.pathname === classPath ?
      'wave-effect waves-effect waves-button active' : ''
    }
  >
    <i aria-hidden className={`width18 textCenter ${icon}`}></i>
    {title}
  </a>
</Link>

【讨论】：

对不起，我很愚蠢，即使他们给了我一个错误的答案，我也无法回答它......我只是 nextjs 的初学者......谢谢！..并享受投票和复选标记！干杯
@xAtifx 哦，对了，我什至没有滚动查看您发布的所有错误消息。为 falsey 分支返回 undefined 可能更技术上更正确，根本不返回类名，但返回空字符串在功能上等同于你不想提供任何你的“波浪效应”和“活跃”课程。

【解决方案2】：

<a className={
   router.pathname == classPath ?
   'wave-effect waves-effect waves-button active':''
   }
>

【讨论】：

谢谢你，但我认为你只是从第一个回答我的问题的人那里复制了答案......无论如何谢谢你回答我猜
@xAtifx - 区别在于这个答案使用 router.pathname == classPath 而另一个答案使用 router.pathname === classPath - 即 == 不是===.
哦，对不起，我检查了，两个作品都给他点赞，这样他就不会难过了 :) 感谢您指出我的误解