给我一个无效钩子的解决方案。在此函数中使用钩子调用是否有问题?
如果我运行此代码,它将面临一个问题,即仅无效的钩子调用。我试图解决此问题,但无法完成。
import React from 'react'
import {useState} from 'react';
import ColorTheme from './ColorTheme'
import WhatsNew from './WhatsNew'
function NavBar() {
const [ShowColor, setShowColor] = useState(false);
const onClick = () => setShowColor(true);
const [ShowWhat, setShowWhat] = useState(false);
const onWhat = () => setShowWhat(true);
return (
<nav className="navbar navbar-expand-lg navbar-light bg-color">
<React.Fragment>
<div className="custom-brand">
<a className="navbar-brand brand-color" href="#">Nomovi</a>
<FontAwesomeIcon icon={faExchangeAlt} className="exchange-icon-custom"/>
</div>
<div>
<i className="fa fa-cog settings-icon" onClick={onClick}>
{ShowColor ? <ColorTheme /> : null}
</i>
<i className="fa fa-question-circle-o question-icon" onClick={onWhat}>
{ShowWhat ? <WhatsNew /> : null}
</i>
<div className="user">Username</div>
</div>
</React.Fragment>
</nav>
)
}
export default NavBar
Whatsnew代码
import React from 'react'
const WhatsNew = () => (
<div className="font-show">
<p className="skin-text">Help</p>
<li>
<a href="#">
<span>What's New</span>
</a>
</li>
</div>
)
export default WhatsNew
附加的ColorTheme代码
import React from 'react'
const ColorTheme = () => (
<div className="custom-picker">
<p className="skin-text">Skins</p>
<li>
<a href="#">
<span className="custom-color">Dark Theme</span>
</a>
</li>
</div>
)
export default ColorTheme
还附上了我的whatsnew和colortheme代码