无效的挂钩调用问题。挂钩只能在功能组件的主体内部调用

时间:2020-06-12 15:37:02

标签: reactjs react-hooks use-state

给我一​​个无效钩子的解决方案。在此函数中使用钩子调用是否有问题?

如果我运行此代码,它将面临一个问题,即仅无效的钩子调用。我试图解决此问题,但无法完成。

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代码

0 个答案:

没有答案