hidden 属性失效

问题描述

在前端的页面中遇到这样的一个问题,我想通过state的状态切换来隐藏页面的某个元素

<div className={this.state.showDiv? " " :"hidden"}>
......
</div> 

矛盾点

之前写react 代码的时候用hidden隐藏页面元素绝对没有问题，今天这样写为什么会失效？

问题解决

Q1:是因为我this.state.showDiv一直为真，所以才不能隐藏吗？
A1:我将代码改成className="hidden",竟然还是不能隐藏，所以不是state的问题，那么原因是什么？找到以前的demo，没错，用法就是这样的

Q2: 回想之前代码和现在代码的区别，之前的代码使用了Bootstrap,而现在用的是ant-design.是因为bootstrap的原因吗？
A2: 在项目中引入了bootstrap的在线链接，果然，真的可以隐藏了，bootstrap 实现这个属性

Q3:现在没有使用bootstrap,我该怎么做？
A3:CSS肯定是可以解决的，那么在ant-design 里面是不是也有类似于hidden这样的方法，找了一圈，没有找到，用css解决了这个问题

反思

感觉自己以前学习真的是太浅，之前写代码的时候从来没有问过自己，为什么这样可以隐藏？知道今天遇到这个问题，才去回想为什么以前是可以的，这个属性到底是哪个库的作用。遇到自己不解的问题，不能放过，开始遇到这个问题的时候，就想直接用CSS，把这个问题绕过，但我知道，学习真的不能这样，越积攒问题会越多。

action

写代码的时候多问问自己为什么，不会的问题就写demo去尝试，找原因。