如何使用状态管理在 React 中切换元素可见性？

在 React 中显示和隐藏元素

React 提供了多种方法来根据特定事件或条件动态控制元素的可见性。让我们探索其中一种技术。

在您的代码片段中，您的目标是在单击“搜索”组件的按钮时显示或隐藏“结果”组件。为此，我们可以利用 React 提供的状态管理功能。

使用 React Hooks（适用于 React 16.8 版本）

使用 React hooks，您可以更有效地管理组件状态。在您的搜索组件中，定义一个名为 showResults 的状态变量并将其初始值设置为 false。然后，在handleClick函数中，使用setShowResults setter将state更新为true，触发重新渲染。

<code class="javascript">import React, { useState } from 'react';

const Search = () => {
  const [showResults, setShowResults] = useState(false);

  const handleClick = () => {
    setShowResults(true);
  };

  return (
    <div className="date-range">
      <input type="submit" value="Search" onClick={handleClick} />
    </div>
  );
};</code>

在Results组件中，可以使用条件渲染，仅在showResults时显示结果是 true。

<code class="javascript">const Results = () => {
  return (
    <div id="results" className="search-results">
      Some Results
    </div>
  );
};</code>

在渲染方法中，您可以根据 showResults 的值有条件地渲染 Results 组件。

<code class="javascript">render() {
  return (
    <div>
      <Search />
      {showResults && <Results />}
    </div>
  );
}</code>

以上是如何使用状态管理在 React 中切换元素可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！