快捷導航

React 條件判斷實例詳解

更新時間：2024年08月12日 10:42:52 作者：國產(chǎn)bug零零柒

在 React 中,可以通過 JavaScript 的條件語句來動態(tài)渲染組件或元素,下面給大家分享幾種常用的在 React 中處理條件渲染的方法,感興趣的朋友跟隨小編一起看看吧

1. 使用 if 語句

在 render 方法或函數(shù)組件的返回值中使用 if 語句來決定渲染內(nèi)容。

實例

import React from 'react';
import ReactDOM from 'react-dom/client';
class MyComponent extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;
    if (isLoggedIn) {
      content = <h1>Welcome back!</h1>;
    } else {
      content = <h1>Please sign up.</h1>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

2. 使用三元運算符

在 JSX 中，可以使用三元運算符進行簡潔的條件渲染。

實例

import React from 'react';
import ReactDOM from 'react-dom/client';
const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

3. 使用邏輯與 (&&) 運算符

在 JSX 中，可以使用邏輯與運算符來進行條件渲染。如果條件為 true，則渲染后面的元素。

實例

import React from 'react';
import ReactDOM from 'react-dom/client';
const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign up.</h1>}
    </div>
  );
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

4. 使用 switch 語句

在需要處理多個條件時，可以在 render 方法中使用 switch 語句。

實例

import React from 'react';
import ReactDOM from 'react-dom/client';
class MyComponent extends React.Component {
  render() {
    const userRole = this.props.userRole;
    let content;
    switch (userRole) {
      case 'admin':
        content = <h1>Welcome, Admin!</h1>;
        break;
      case 'user':
        content = <h1>Welcome, User!</h1>;
        break;
      case 'guest':
        content = <h1>Welcome, Guest!</h1>;
        break;
      default:
        content = <h1>Who are you?</h1>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />);