在 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