display none无效

时间:2018-06-14 03:42:37

标签: javascript css reactjs

嘿,我有一个反应功能组件,看起来像这样

Nessus determined the server is unpatched and is not using any
of the suggested workarounds by making the following requests :

-------------------- Testing for workarounds --------------------
HEAD /search/stylesheets/style.css HTTP/1.1
Host: xxx (I have removed it)
Accept-Charset: iso-8859-1,utf-8;q=0.9,*;q=0.1
Accept-Language: en
Request-Range: bytes=5-0,1-1,2-2,3-3,4-4,5-5,6-6,7-7,8-8,9-9,10-10
Range: bytes=5-0,1-1,2-2,3-3,4-4,5-5,6-6,7-7,8-8,9-9,10-10
Connection: Keep-Alive
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*

HTTP/1.1 206 Partial Content
Date: Fri, 08 Jun 2018 01:46:15 GMT
Server: Apache
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Mon, 28 May 2018 09:11:04 GMT
ETag: W/"5630-163a603e954"
Content-Type: text/css; charset=UTF-8
Content-Range: bytes 1-10/22064
Content-Length: 10
X-FRAME-OPTIONS: SAMEORIGIN
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
-------------------- Testing for workarounds --------------------

-------------------- Testing for patch --------------------
HEAD /search/stylesheets/style.css HTTP/1.1
Host: xxx (I have removed it)
Accept-Charset: iso-8859-1,utf-8;q=0.9,*;q=0.1
Accept-Language: en
Request-Range: bytes=0-,1-
Range: bytes=0-,1-
Connection: Keep-Alive
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*

HTTP/1.1 206 Partial Content
Date: Fri, 08 Jun 2018 01:46:20 GMT
Server: Apache
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Mon, 28 May 2018 09:11:04 GMT
ETag: W/"5630-163a603e954"
Content-Type: text/css; charset=UTF-8
Content-Range: bytes 0-22063/22064
Content-Length: 22064
X-FRAME-OPTIONS: SAMEORIGIN
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
-------------------- Testing for patch --------------------

这里我想在桌面上隐藏一个按钮import React from 'react'; import Classes from './toolbar.css'; import Logo from '../../logo/logo.js'; import Navitems from '../navigation-items/navigation-items.js'; const toolbar = (props) => { return ( <header className={Classes.Toolbar}> <div className={Classes.SideDrawerVisibility}> <button onClick={props.sideDrawerTogglerHandler}> Click Me </button> </div> <div className={Classes.Logo}> <Logo height="100%"/> </div> <nav className={Classes.DesktopOnly}> <Navitems /> </nav> </header> ) } export default toolbar; ,即这行JSX

click me

在我的Css中我做过类似的事情

<div className={Classes.SideDrawerVisibility}>
            <button onClick={props.sideDrawerTogglerHandler}> Click Me </button>
</div>

但按钮仍然可见并且可以在桌面和移动设备上工作,对我可能做错了什么的想法?

1 个答案:

答案 0 :(得分:0)

您无法导入css类选择器,例如import Classes from './toolbar.css';

您必须将className prop的值设为字符串。 改变你的道具,

<div className="SideDrawerVisibility">
            <button onClick={props.sideDrawerTogglerHandler}> Click Me </button>
</div>

并导入为,

import './toolbar.css';

你可以看到它有效。