面试题：React 中条件渲染的常见方式有哪些

Question

请详细阐述在 React 项目里实现条件渲染的常见方法，并分别举例说明。例如，当根据用户是否登录来显示不同的界面元素时，如何运用这些条件渲染方式。

Answer 1

1. 使用 if 语句

在 JavaScript 中，if 语句是最基本的条件判断方式。在 React 中，可以在 render 方法内部使用 if 语句来实现条件渲染。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  render() {
    if (this.state.isLoggedIn) {
      return <div>欢迎，用户已登录</div>;
    } else {
      return <div>请登录</div>;
    }
  }
}

export default App;

2. 使用三元运算符

三元运算符（condition? valueIfTrue : valueIfFalse）是一种简洁的条件判断表达式，在 React 中也经常用于条件渲染。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  render() {
    return (
      <div>
        {this.state.isLoggedIn? <div>欢迎，用户已登录</div> : <div>请登录</div>}
      </div>
    );
  }
}

export default App;

3. 使用逻辑与（&&）运算符

逻辑与（&&）运算符在 React 条件渲染中也很有用。当左边的表达式为真时，才会渲染右边的表达式。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  render() {
    return (
      <div>
        {this.state.isLoggedIn && <div>欢迎，用户已登录</div>}
        {!this.state.isLoggedIn && <div>请登录</div>}
      </div>
    );
  }
}

export default App;

4. 使用 switch 语句（适用于多条件判断）

当有多个条件需要判断时，可以使用 switch 语句。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userStatus: 'guest' // 可能的值 'guest', 'user', 'admin'
    };
  }

  render() {
    let content;
    switch (this.state.userStatus) {
      case 'guest':
        content = <div>欢迎访客，请登录</div>;
        break;
      case 'user':
        content = <div>欢迎普通用户</div>;
        break;
      case 'admin':
        content = <div>欢迎管理员</div>;
        break;
      default:
        content = <div>未知状态</div>;
    }

    return <div>{content}</div>;
  }
}

export default App;