React之条件渲染

条件渲染是指根据特定条件选择性地渲染React组件或元素。这可以通过JavaScript中的条件语句（如if语句或三元运算符）来实现。在React中，条件渲染通常与组件的render方法结合使用，根据某些条件返回不同的React元素。

以下是一些常见的条件渲染的模式：

1. 使用 if 语句

import React, { Component } from 'react';

class ConditionalRender extends Component {
  render() {
    if (this.props.isLoggedIn) {
      return <p>Welcome, User!</p>;
    } else {
      return <p>Please log in.</p>;
    }
  }
}

export default ConditionalRender;

2. 使用三元运算符

import React from 'react';

function ConditionalRender(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}
    </div>
  );
}

export default ConditionalRender;

3. 使用逻辑与 &&

import React from 'react';

function ConditionalRender(props) {
  return (
    <div>
      {props.isLoggedIn && <p>Welcome, User!</p>}
      {!props.isLoggedIn && <p>Please log in.</p>}
    </div>
  );
}

export default ConditionalRender;

4. 使用逻辑或 ||

import React from 'react';

function ConditionalRender(props) {
  return (
    <div>
      {props.isAdmin || <p>You are not an admin.</p>}
    </div>
  );
}

export default ConditionalRender;

5. 使用条件渲染函数

import React from 'react';

function WelcomeMessage() {
  return <p>Welcome, User!</p>;
}

function LoginMessage() {
  return <p>Please log in.</p>;
}

function ConditionalRender(props) {
  return (
    <div>
      {props.isLoggedIn ? <WelcomeMessage /> : <LoginMessage />}
    </div>
  );
}

export default ConditionalRender;

在上述例子中，ConditionalRender 组件根据 props.isLoggedIn 的值渲染不同的内容。你可以根据实际需求选择使用哪种条件渲染方式。这种灵活性使得React能够根据应用程序的状态动态地呈现不同的UI。

注意

切勿将数字放在 && 左侧

JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而，如果左侧是 0，整个表达式将变成左侧的值（0），React 此时则会渲染 0 而不是不进行渲染。

例如，一个常见的错误是 messageCount &&

New messages

。其原本是想当 messageCount 为 0 的时候不进行渲染，但实际上却渲染了 0。为了更正，可以将左侧的值改成布尔类型：messageCount > 0 &&

New messages

。