条件语句总是返回false (内联样式)。

Question

条件语句每次都返回false，即使它“应该”返回true.

  const Navy = () => {
    const [content, setContent] = useState(<Today/>)


    const homepage = () => {
      setContent(<Today/>);
    }
    const accountpage = () => {
      setContent(<Account/>);
    }
return(
             <Nav >
                <ul className='menuItems'>
                  <div className='mainmenu'>
                    <Nav.Link className='linkitem' style={{color: content === useState(<Today/>) ?  '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: content === useState(<Today/>) ?  '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>
)}

我的目标是，如果组件当前正在使用，则这一行返回为true (当前返回false，不管如何)：

<Nav.Link className='linkitem' style={{color: content === useState(<Today/>) ?  'red' : 'blue'}}>

Answer 1

<Today />是组件的基础:每次调用<Today />时，都会创建一个新的、不同的对象。无论如何，您应该比较content，而不是useState(content)

您可以尝试一个棘手的(未经测试的)解决方案，如：

content.constructor.name === 'Today' ? ...

否则，您可以将状态更改为国旗：

 const [content, setContent] = useState('today')

然后，比较肯定有效，您可以选择render with：

content === 'today' ? <Today> : <Account>

，但我建议您使用反应路由器DOM提供一个更干净的解决方案。

然后：

const YourComponent = () => {
const location = useLocation();
... 
return <>
    // when you want to select color
    matchPath(location, {path: '/today'}) ? 'color1' : 'color2'

    // when you choose what component show
    <Switch>
        <Route exact path="/today">
             <Today>
        </Route>
        <Route exact path="/account">
             <Account>
        </Route>
    </Switch>
</>

Answer 2

useState(某物)总是给出一个包含2件事的数组

1. 价值
2. updateFuncion

因此，您将与包含值updateValueFunction的数组进行比较。

在这里输入图像描述

加了一张照片。

如果您尝试比较内容和useState()，那么您仍然会与整个2个对象有一些不同。

因此，您仍然必须检查两个相同的检查-- content.type === useState().type 在这里输入图像描述