React导航组件内联条件判断始终返回false，激活样式不生效如何解决

问题根因 #

• 错误1：useState是React专属钩子，仅允许在组件函数的顶层作用域调用，你将它写入内联样式的条件判断属于语法违规，本身就无法得到预期值。
• 错误2：就算你去掉useState直接写content === <Today/>，判断结果也永远是false：每次执行<Today/>都会生成一个全新的React元素对象，不同对象的引用地址不同，全等比较永远不成立。

修复方案 #

不要将组件实例存在state中，改为存储页面标识（字符串、数字等基础类型，基础类型可以直接做值比较），修改后代码如下：

const Navy = () => {
  // 存储当前激活页面的标识，而不是组件实例
  const [activePage, setActivePage] = useState('home')

  const homepage = () => {
    setActivePage('home');
  }
  const accountpage = () => {
    setActivePage('account');
  }
  // 根据标识渲染对应内容
  const renderContent = () => {
    switch(activePage) {
      case 'home': return <Today/>
      case 'account': return <Account/>
      default: return <Today/>
    }
  }
  return(
    <>
      {/* 渲染当前页面内容 */}
      {renderContent()}
      <Nav >
        <ul className='menuItems'>
          <div className='mainmenu'>
            <Nav.Link className='linkitem' style={{color: activePage === 'home' ?  'red' : 'blue'}}>
              <li onClick={homepage}> 
                <i class="fa fa-home" aria-hidden="true"></i>
                Home
                <div className='arrow'>
                  <i class="fa fa-angle-double-right" ></i>
                </div>
              </li>
            </Nav.Link>
            <Nav.Link className='linkitem' style={{color: activePage === 'account' ?  'red' : 'blue'}}>
              <li onClick={accountpage}>
                <i class="fa fa-cog" aria-hidden="true"></i>
                Account
                <div className='arrow'>
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
            </Nav.Link>
          </div>
        </ul>
      </Nav>
    </>
  )
}

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