Question

我有一个反应组件，我已经添加了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 properties，而是使用条件渲染的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;

Answer 2

您可能希望将logged变量仅作为props Navigation传递给<Navigation 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;

Answer 3

不是直接设置样式display: none和操纵DOM，而是使用conditional rendering并根据条件只渲染一个元素。在JSX内使用ternary operator条件。

像这样：

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'/>

Javascript反应组件条件菜单项显示

3 个答案: