Javascript react组件条件菜单项显示

我有一个反应组件，我已经添加了2个链接

一个链接将显示登录链接，另一个链接将显示注销

我只是不想两者都在componentDidMount上显示，我添加了一个条件，将隐藏其中一个或另一个

代码如下：

class Navigation extends Component {

  componentDidMount() {

    let logged = true;

    if (logged) {
      document.getElementById('login').style.display = 'none';
    } else {
      document.getElementById('logout').style.display = 'none';
    }

    }
  }

  render() {

    return (
      <div>
        <ul>
          <li id="login"><a href="#login">Login</a></li>
          <li id="logout"><a href="#logout">Logout</a></li>
        </ul>
      </div>
    );
  }
}

export default Navigation;

类导航扩展组件{
componentDidMount（）{
让logged=true；
如果（已记录）{
document.getElementById（'login'）.style.display='none'；
}否则{
document.getElementById（'logout'）.style.display='none'；
}
}
}
render（）{
返回(




);
}
}
导出默认导航；

问题不是没有任何东西被隐藏起来，所以它不起作用

---

如何解决这个问题，以便获得隐藏其中一个或另一个的条件？

我想说，与其直接修改

DOM属性，不如使用条件渲染的React方法，如

class Navigation extends Component {

  render() {
    //Get the logged value from wherever you are getting it in the application.
    // Eg: let logged = true 
    return (
      <div>
        <ul>
          {logged ? (<li id="logout"><a href="#logout">Logout</a></li>) :  (<li id="login"><a href="#login">Login</a></li>) }

        </ul>
      </div>
    );
  }
}

export default Navigation;

类导航扩展组件{
render（）{
//从应用程序中的任何位置获取记录的值。
//例：let=true
返回(

{logged？（
）：（
）}

);
}
}
导出默认导航；
我想说，与其直接修改
DOM属性，不如使用条件渲染的React方法，比如

class Navigation extends Component {

  render() {
    //Get the logged value from wherever you are getting it in the application.
    // Eg: let logged = true 
    return (
      <div>
        <ul>
          {logged ? (<li id="logout"><a href="#logout">Logout</a></li>) :  (<li id="login"><a href="#login">Login</a></li>) }

        </ul>
      </div>
    );
  }
}

export default Navigation;

类导航扩展组件{
render（）{
//从应用程序中的任何位置获取记录的值。
//例：let=true
返回(

{logged？（
）：（
）}

);
}
}
导出默认导航；
不要设置样式
显示：无
和直接操作
DOM
，而是根据条件仅使用和渲染一个元素。在
JSX
中使用应用条件

像这样：


类导航扩展了React.Component{
render（）{
让logged=true；//使用实际值
返回(

{
记录？

:

}

);
}
}
ReactDOM.render（，document.getElementById（'app'））
不要设置样式
显示：无
和直接操作
DOM
，而是根据条件仅使用和渲染一个元素。在
JSX
中使用应用条件

像这样：


类导航扩展了React.Component{
render（）{
让logged=true；//使用实际值
返回(

{
记录？

:

}

);
}
}
ReactDOM.render（，document.getElementById（'app'））
您可能希望将
记录的
变量作为道具传递给
导航组件：
。在这种情况下，你可以这样写：

const Navigation = ({ logged }) => {
  <div>
    <ul>
      {!logged && <li id="login"><a href="#login">Login</a></li>}
      {logged && <li id="logout"><a href="#logout">Logout</a></li>}
    </ul>
  </div>
}

export default Navigation;

const导航=（{logged}）=>{

{！已登录&
}
{logged&
}

}
导出默认导航；
您可能希望将
记录的
变量作为道具传递给
导航组件：
。在这种情况下，你可以这样写：

const Navigation = ({ logged }) => {
  <div>
    <ul>
      {!logged && <li id="login"><a href="#login">Login</a></li>}
      {logged && <li id="logout"><a href="#logout">Logout</a></li>}
    </ul>
  </div>
}

export default Navigation;

const导航=（{logged}）=>{

{！已登录&
}
{logged&
}

}
导出默认导航；