如何解决React中‘为非布尔属性接收true’警告及菜单图片渲染问题

问题1：消除「received 'true' for non-Boolean attribute」警告 #

• 问题根因：侧边栏容器的类名写法错误，absolute top 20中的top被React误识别为HTML属性，而非Tailwind CSS类名，触发属性类型不匹配警告。
• 修复方案：将top 20改为Tailwind标准类名格式top-20，让React正确解析为CSS类。

问题2：修复菜单图片无法渲染的问题 #

• 问题根因：图片标签的src和alt属性存在语法错误：
  1. src属性被多余的双引号包裹，导致React无法解析动态切换图片的表达式；
  2. alt属性的引号未闭合，存在语法缺陷。
• 修复方案：
  • 移除src值外层的双引号，改为src={toggle ? close : menu}；
  • 闭合alt属性的引号，补充清晰描述，比如alt="菜单图标"。

修正后的完整代码 #

import { useState } from 'react';
import { close, logo, menu } from '../assets';
import { navLinks } from '../constants';

const Navbar = () => {
  const [toggle, setToggle] = useState(false);

  return (
    <nav className="w-full flex py-6 justify-between items-center navbar">
      <img src={logo} alt="hoobank" className="w-[124px] h-[32px]" />
      
      <ul className='list-none sm:flex hidden justify-end items-center flex-1'>
        {navLinks.map((nav, index)=>(
          <li
            key={nav.id}
            className={`font-poppins font-normal cursor-pointer text-[16px] ${index === navLinks.length - 1 ? 'mr-0' : 'mr-10'} text-white`}
          >
            <a href={`#${nav.id}`}>
              {nav.title}
            </a>
          </li>
        ))}
      </ul>

      <div className="sm:hidden flex flex-1 justify-end items-center">
        <img 
          src={toggle ? close : menu}
          alt="菜单图标"
          className="w-[28px] h-[28px] object-contain"
          onClick={() => setToggle((prev) => !prev)}
        />
        <div
          className={`${toggle ? 'flex' : 'hidden'} p-6 bg-black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] rounded-xl sidebar`} 
        >
          <ul className='list-none flex flex-col justify-end items-center flex-1'>
            {navLinks.map((nav, index)=>(
              <li
                key={nav.id}
                className={`font-poppins font-normal cursor-pointer text-[16px] ${index === navLinks.length - 1 ? 'mr-0' : 'mb-4'} text-white`}
              >
                <a href={`#${nav.id}`}>
                  {nav.title}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default Navbar

注：额外移除了li标签中重复的mr-10类名，避免样式冗余。

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