React 条件渲染

React 是一个用于构建复杂用户界面的 JavaScript 库。它采用组件化的开发方式，通过组合和嵌套不同的组件来构建用户界面。

在 React 中，通常需要根据一些条件来渲染不同的 UI。这可以通过条件渲染来实现。本文将介绍 React 中的条件渲染及其相关用法。

if-else 语句

在 React 中，我们可以使用 if-else 语句来进行条件渲染。例如，我们可以根据用户是否登录来渲染不同的 UI。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

ReactDOM.render(
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

在上面的例子中，Greeting 组件根据 isLoggedIn 属性的值来渲染不同的 UI。如果 isLoggedIn 为 true，则渲染 “Welcome back!"，否则渲染 “Please sign up.”

三元表达式

在 React 中，我们也可以使用三元表达式来进行条件渲染。例如，我们可以根据用户是否登录来渲染不同的按钮文本。

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      {props.isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
}

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

  handleLoginClick = () => {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick = () => {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <LoginButton isLoggedIn={isLoggedIn} onClick={isLoggedIn ? this.handleLogoutClick : this.handleLoginClick} />
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

在上面的例子中，LoginControl 组件根据 isLoggedIn 状态来渲染不同的按钮文本。如果 isLoggedIn 为 true，则按钮文本为 “Logout”，否则按钮文本为 “Login”。

&& 运算符

在 React 中，我们也可以使用 && 运算符来进行条件渲染。例如，我们可以根据用户是否有未读消息来渲染不同的 UI。

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <p>You have {unreadMessages.length} unread messages.</p>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

在上面的例子中，如果用户有未读消息，则渲染显示未读消息数量的 p 元素，否则不渲染。

避免使用条件渲染

在 React 中，条件渲染是很常见的操作。但是过多的条件渲染会使代码变得难以维护和阅读。因此，我们应该尽量避免使用条件渲染。

在某些情况下，可以使用默认值来避免使用条件渲染。例如，我们可以给组件的属性设置默认值，而不是根据属性是否存在来进行条件渲染。

function Button(props) {
  return <button>{props.label || 'Submit'}</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('root')
);

在上面的例子中，如果 Button 组件没有传入 label 属性，则渲染 “Submit”，否则渲染传入的 label 属性。

总结：

React 中的条件渲染可以使用 if-else 语句、三元表达式、&& 运算符等方式实现。但是过多的条件渲染会使代码变得难以维护和阅读。在某些情况下，可以使用默认值来避免使用条件渲染。

React 教程 React 组件