Javascript react 组件条件菜单项显示

Question

我有一个 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;

问题不在于任何方式都没有隐藏任何内容，因此它不起作用。

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

Answer 1

我想说，不要直接修改 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;