在 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` 隐藏消息