在 React 中顯示和隱藏元素

Rana Hasnain Khan 2024年2月15日
在 React 中顯示和隱藏元素

useStateuseEffect 鉤子是 React 16.8+ 的一部分,它提供與基於類的元件相同的功能元件。我們將在本文中介紹這些功能。

在開發商業應用程式時,我們需要根據使用者角色或條件隱藏一些資料。我們將給出一個基於條件顯示和隱藏資料的示例。

在 React 中使用 useStateuseEffect 隱藏訊息

首先,我們將定義常量 showMessagesetShowMessage,並將其 useState 設定為 true。使用 useEffect,我們將在 10 秒後將狀態更改為 false。

# react
import React, { useState, useEffect } from "react";

export default function App() {
  const [showMessage, setShowMessage] = useState(true);
  useEffect(() => {
    setTimeout(function () {
      setShowMessage(false);
    }, 10000);
  }, []);
  return (
    <div className="App">

	  {showMessage && <h1>This text will show!</h1>}

    </div>
  );
}

輸出:

React 隱藏和顯示

如你所見,文字僅顯示 10 秒,然後消失。

如果我們想在單擊按鈕時隱藏元素,我們將建立一個按鈕來更改訊息的狀態,該訊息將隱藏它並在單擊按鈕時顯示它。

# react
<button onClick={() => setShowMessage(!showMessage)}>Show Text</button>

讓我們看看它是如何工作的。

輸出:

React 使用按鈕單擊隱藏和顯示

通過這種方式,我們可以使用 useEffectuseState 輕鬆隱藏和顯示 react 中的元素或元件。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn