如何在 React 中显示或隐藏元素？

在 React 中，你可以使用内部状态来实现元素的显示和隐藏。这可以通过 state 和 setState 方法轻松实现。或者，你也可以使用条件渲染来根据已知的逻辑条件展示或隐藏元素。

使用 state 和 setState 方法

假设你有一个元素 <div>Hello World</div> 需要根据用户的点击而隐藏或显示。你可以通过以下代码来实现：

import React, { useState } from 'react';

function App() {
  const [isShown, setIsShown] = useState(true);

  const handleClick = () => {
    setIsShown(!isShown);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>
      {isShown && <div>Hello World</div>}
    </div>
  );
}

在上面的代码中，我们使用了一个名为 isShown 的内部状态来表示当前元素是否应该显示。默认情况下，它是 true，因此元素将显示在屏幕上。我们还编写了一个名为 handleClick 的函数，该函数在用户单击按钮时将 isShown 值取反。通过此操作，<div>Hello World</div> 元素会在隐藏和显示之间交替。

最后，我们在组件返回的 JSX 中使用了条件渲染来根据当前的 isShown 值来显示或隐藏元素。具体来说，我们使用了一个 "短路 (short circuit) 运算符" —— && —— 来创建一个条件，使仅当 isShown 为 true 时才呈现 <div>Hello World</div> 元素。

使用条件渲染

如果你需要根据已知的逻辑条件展示或隐藏元素，你可以使用条件渲染来实现。以下是展示示例：

import React from 'react';

function App() {
  const isLoading = true;

  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <div>Hello World</div>
      )}
    </div>
  );
}

在上面的代码中，我们使用了一个名为 isLoading 的逻辑变量来表示我们是否需要展示一个 loading 状态。如果 isLoading 为 true，则会呈现 "Loading..." 文本；否则，将显示 "Hello World" 文本。

在这里，我们使用了一个 "条件运算符 (ternary operator)" 来创建一个条件，使我们在 isLoading 为 true 时呈现第一个元素，否则呈现第二个元素。

总结

React 可以通过内部状态和条件渲染轻松实现元素的显示和隐藏。无论你是需要根据内部逻辑或已知情况来展示或隐藏元素，你都有多种方法可以选择。