React を使用していて、同じコンポーネントのインスタンスが複数ある場合、状態の管理が難しくなることがあります。コンポーネントがどのように対話する必要があるかに応じて、状態を異なる方法で処理する必要があります。私が見つけたうまくいくものは次のとおりです。

独立したインスタンス: コンポーネント内に状態を保持する

コンポーネントが相互に通信する必要がない場合は、その状態をコンポーネント内に保持することが最善です。このように、各インスタンスは独自の状態を持ち、1 つのインスタンスの変更は他のインスタンスに影響を与えません。

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

// Usage
 // Instance 1
 // Instance 2

ここでは、各 Counter コンポーネントが独自のカウントを追跡します。したがって、一方のカウンターのボタンをクリックしても、もう一方のカウンターのカウントは変わりません。

依存インスタンス: 親コンポーネントで状態を管理する

ただし、コンポーネントが何らかの状態を共有する必要がある場合、または調整された方法で動作する必要がある場合は、状態を親コンポーネントに移動することをお勧めします。親は共有状態を管理し、それを props として渡すことができます。これにより、すべてのインスタンスの同期が維持され、スムーズに連携することが保証されます。

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    

      
Total Count: {sharedCount}
      
  );
}

function Counter({ count, setCount }) {
  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

このアプローチが機能するのは、状態が親コンポーネント内にある場合、その状態が更新されるとすべてのインスタンスの再レンダリングがトリガーされ、すべてのインスタンスに最新の UI が表示されることが保証されるためです。状態が各インスタンスで個別に保持されている場合、状態が変更されたインスタンスのみが再レンダリングされ、インスタンス間で UI の一貫性が失われます。

私のプロジェクトの例

アコーディオンコンポーネントを構築しているときにこれを発見しました。ここに私自身の作品からの 2 つの例があります:

• 独立したアコーディオン インスタンス: 例。この設定では、各アコーディオン インスタンスは独立して動作します。

• 依存するアコーディオン インスタンス: 例。このバージョンでは、すべてのアコーディオン インスタンスは相互に依存し、同期を保ちます。

簡単なまとめ

• コンポーネントが個別に動作する場合は、各コンポーネント内で状態を保持します。

• 状態を共有する必要がある場合、または調整された方法で連携する必要がある場合は、親で状態を管理します。

このアプローチは、これらのアコーディオンのサンプルを構築する際に大きな違いをもたらしました。あなたにも役立つことを願っています!