React中通过State变量点击按钮实现条件渲染失效问题排查

一、测试Demo的问题原因 #

你在普通CSS文件里写了${({ show }) => (show ? 1 : 0)}这种语法，但普通CSS不支持JS表达式，浏览器会把这段代码当成无效的opacity值，自然不会生效。直接写1或0是标准CSS语法，所以能正常工作。

Demo修复方案 #

两种可选方式：

1. 使用内联样式直接绑定状态

// 替换原h1标签
<h1 style={{ opacity: show ? 1 : 0 }}>Hello World</h1>

2. 通过切换className控制样式
   修改styles.css：

.App {
  font-family: sans-serif;
  text-align: center;
}
h1.show {
  opacity: 1;
}
h1.hide {
  opacity: 0;
}

修改组件返回部分：

<h1 className={show ? 'show' : 'hide'}>Hello World</h1>

二、实际项目（styled-components）的问题原因 #

你的NavMenu组件定义里用了${({ show }) => ...}来读取props，但使用组件时没有传入show状态。styled-components的样式函数依赖组件传入的props才能生效，不传的话show会是undefined，导致样式计算错误。

项目修复方案 #

在使用NavMenu时，将你的show状态作为props传递进去：

// 假设你已经在组件里定义了const [show, setShow] = useState(...)
<NavMenu show={show}>
    {data.map((elementList, index) => (
        <NavItem key={index}>
            <NavLinks to={elementList.to}>{elementList.text}</NavLinks>              
        </NavItem>
    ))}
</NavMenu>

这样styled-components就能拿到show的值，正确计算@media下的opacity、visibility和transform属性，菜单的显示隐藏就能正常工作了。

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