すべてのアコーディオンのオンとオフを切り替えるボタンを設定するにはどうすればよいですか?

Question

次のコードを使用して、折りたたみ可能なアコーディオンを作成するコンポーネントがあります。

import React、{useState} from 'react';

const Collapsible = (props) =>{
    const [open, setOpen] = useState(false);
    const toggle = () => {
        setOpen(!open);
    }
    戻る（
        <div>
            <button className={props.level} onClick={toggle}>{props.label}</button>
            {開く && (
                <div className="切り替え">
                    {props.children}
                </div>
            )}
        </div>
    ）
}

デフォルトをエクスポート Collapsible;

メイン アプリケーションのいくつかの場所で使用し、場合によっては他のアコーディオンでも使用します。アコーディオンはデータに基づいて動的にレンダリングされるため、ページ上にアコーディオンがいくつあるのか実際にはわかりませんでした。これを念頭に置いて、固定数を設定する必要がなく、メイン アプリケーションのすべてのアコーディオン (つまり、他のコンポーネントの一部のアコーディオン) をレンダリングする必要もなく、すべてのアコーディオンをオン (およびオフ) にするボタンをメイン アプリケーションに作成したいと考えています。そしてメイン アプリケーションにインポートされます)。

これを実現するために ref フックを使用してみました。

1. 折りたたみ可能なコンポーネントのボタンに ref を追加し、props を介して親コンポーネントからアクセスします。

<button className={props.level} onClick={toggle} ref={props.innerRef}>{props.label}</button> ;

2. メイン アプリケーションに次の参照を追加します。

const childRef = useRef();
const openClick = () => {
   childRef.state = true;
}

const closeClick = () => {
   childRef.state = false;
}

3. メイン アプリケーションで次のボタンを使用します。

<ボタン onClick = {openClick}>
   すべて展開
</ボタン>
<ボタンオンクリック = {closeClick}>
   すべて折りたたむ
</ボタン></前>
<ol start="4">
<li>レンダリング時にアコーディオンに参照を追加します: </li>
</ol>
<pre class="brush:php;toolbar:false;"><Collapsible label="" level="content" innerRef={childRef}>

これは実際には何も起こりません。おそらく、ステップ 2 で状態にアクセスしようとした方法が間違っていたためです。しかし、試してみる価値はあると思いました...

これが可能かどうかについて何かアイデアはありますか?

Answer 1

Redux を使用できます。

1. アコーディオンをレンダリングするときは、アコーディオンに特定の ID を与え、ストレージに保存します。
2. スライスを作成しますopenAllAccordions、IDをループして、そのIDに属するアコーディオンをopen=trueに設定します
3. スライスを作成しますcloseAllAccordions、IDをループして、そのIDに属するアコーディオンをopen=falseに設定します

Answer 2

コンポーネント インスタンスの多かれ少なかれ任意のコレクションでは、何らかの調整が必要になるのが一般的です。私が成功したアプローチの 1 つは、コンポーネントが登録できるフックが関連付けられた Context を作成することです。このフックは、共有状態のビューと、ニーズに合わせてその状態を変更する関数を返します。

ここで、登録された各コンポーネントを保存する opener 関数を作成し、openAll/closeAll 関数のコンテキストを提供できます。

リーリー

...コンテキストに登録し、おなじみの toggle/open 値を返すために各子コンポーネントによって呼び出されるフックもあります:

リーリー

バッチ操作を実行するための別のフックもあり、これも便利です:

リーリー

サンドボックス

簡単にするために、ここでは、登録された各コンポーネントの一意の識別子として別の opener (別名 setOpen) 関数が使用されていることに注意してください。柔軟な代替方法は、他の識別子を使用することです。これにより、ナビゲーション中などに任意のアコーディオンを開いたり閉じたりすることができます。