在 React 中点击显示或隐藏另一个组件

作者

在 React 中点击显示或隐藏另一个组件

Show or hide another component on Click in React

在 React 中点击显示或隐藏另一个组件：

  1. onClick在元素上设置道具。
  2. 单击该元素时，切换一个状态变量来跟踪组件是否显示。
  3. 根据状态变量有条件地渲染组件。
应用程序.js
import {useState} from 'react';

export default function App() {
  const [isShown, setIsShown] = useState(false);

  const handleClick = event => {
    // 👇️ toggle shown state
    setIsShown(current => !current);

    // 👇️ or simply set it to true
    // setIsShown(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>

      {/* 👇️ show elements on click */}
      {isShown && (
        <div>
          <h2>Some content here</h2>
        </div>
      )}

      {/* 👇️ show component on click */}
      {isShown && <Box />}
    </div>
  );
}

function Box() {
  return (
    <div>
      <h2>Box</h2>
    </div>
  );
}

点击显示组件

我们onClick在按钮元素上设置了 prop，所以每次单击它时，handleClick都会调用该函数。

在我们的handleClick函数中，我们简单地切换isShown状态变量。

请注意，我们将初始值传递false给
useState挂钩，因为我们希望组件默认隐藏。

我们将一个函数传递给setState，因为该函数保证以当前（最新）状态调用。

应用程序.js
const handleClick = event => {
  // 👇️ toggle shown state
  setIsShown(current => !current);

  // 👇️ or simply set it to true
  // setIsShown(true);
};

当使用前一个状态计算下一个状态时，将一个函数传递给
setState.

否则，如果我们有权访问的状态布尔值不代表最新值，我们可能会遇到一些奇怪的竞争条件。

该示例在每次单击按钮时切换状态布尔值，但如果您只想显示元素，请将状态变量设置为true。

应用程序.js
const handleClick = event => {
  // 👇️ only show element on click
  setIsShown(true);
};

我们使用
逻辑与 (&&)
运算符根据状态变量有条件地渲染组件。

应用程序.js
<div>
  <button onClick={handleClick}>Click</button>

  {/* 👇️ show elements on click */}
  {isShown && (
    <div>
      <h2>Some content here</h2>
    </div>
  )}

  {/* 👇️ show component on click */}
  {isShown && <Box />}
</div>

如果左边的值为真，则逻辑 AND (&&) 运算符返回右边的值。

我们可以使用这种方法，因为
布尔值、null 和 undefined 都被忽略了。他们根本不渲染。

以下 JSX 表达式均不呈现任何内容。

应用程序.js
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

–