在 React 中顯示和隱藏元素

Rana Hasnain Khan 2024年2月15日

React React Show Hide

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

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

在 React 中使用 `useState` 和 `useEffect` 隱藏訊息

首先，我們將定義常量 showMessage 和 setShowMessage，並將其 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>

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

輸出：

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

作者： Rana Hasnain Khan

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.

在 React 中使用 useState 和 useEffect 隱藏訊息

在 React 中使用 `useState` 和 `useEffect` 隱藏訊息