状態管理を使用して React で要素の可視性を切り替える方法は?

React での要素の表示と非表示

React には、特定のイベントまたは条件に基づいて要素の表示/非表示を動的に制御するためのいくつかのアプローチが用意されています。これらのテクニックの 1 つを見てみましょう。

コード スニペットでは、検索コンポーネントのボタンがクリックされたときに結果コンポーネントを表示または非表示にすることを目的としています。これを実現するには、React が提供する状態管理機能を活用できます。

React フックの使用 (React バージョン 16.8 の場合)

React フックを使用すると、コンポーネントの状態をより効果的に管理できます。 Search コンポーネントで、showResults という状態変数を定義し、その初期値を false に設定します。次に、handleClick 関数で、setShowResults セッターを使用して状態を 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 の場合にのみ結果を表示できます。

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

render メソッドでは、showResults の値に基づいて Results コンポーネントを条件付きでレンダリングします。

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

以上が状態管理を使用して React で要素の可視性を切り替える方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。