Javascript React组件的条件菜单项显示

Question

I have a react component and I've added 2 links.

One link will show the login link and the other with show the logout.

I just don't want both to show so on componentDidMount I've added a condition which will hide either one or the other.

Here is the code:

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;

The issue is not nothing is being hidden either way so it's not working.

How can I fix this so I can get the condition to hide either one or the other?

Answer 1

I would say instead of directly modifying the DOM properties go with the React approach of conditional rendering like

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;

Answer 2

You probably want to pass the logged variable to the Navigation component simply as props: <Navigation logged /> . In that case, you could than write it this way:

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;

Answer 3

Instead of setting the style display: none and manipulating the DOM directly, use conditional rendering and render only one element on the basis of condition. Use ternary operator applying conditions inside JSX .

Like this:

 class Navigation extends React.Component { render() { let logged = true; //use actual value return ( <div> <ul> { logged ? <li id="logout"><a href="#logout">Logout</a></li> : <li id="login"><a href="#login">Login</a></li> } </ul> </div> ); } } ReactDOM.render(<Navigation/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/>