모든 아코디언을 켜고 끄는 버튼을 어떻게 설정하나요?

Question

다음 코드를 사용하여 축소 가능한 아코디언을 생성하는 구성요소가 있습니다.

'react'에서 React, {useState}를 가져옵니다.

const 축소 가능 = (소품) =>{
    const [open, setOpen] = useState(false);
    const 토글 = () =>
        setOpen(!open);
    }
    반품(
        <div>
            <button className={props.level} onClick={toggle}>{props.label}</button>
            {열기 &&
                <div className="토글">
                    {소품.어린이}
                </div>
            )}
        </div>
    )
}

기본 축소 가능 내보내기;

주 애플리케이션의 여러 위치에서 사용하고 때로는 다른 아코디언에서도 사용합니다. 여러 경우에 아코디언은 데이터를 기반으로 동적으로 렌더링되었기 때문에 실제로 페이지에 얼마나 많은 아코디언이 있는지 전혀 알 수 없었습니다. 이를 염두에 두고 고정된 수를 설정하지 않고 기본 응용 프로그램에서 모든 아코디언(예: 다른 구성 요소의 일부 아코디언)을 렌더링하지 않고도 모든 아코디언을 켜고 끄는 버튼을 기본 응용 프로그램에 만들고 싶습니다. 그런 다음 기본 애플리케이션으로 가져옵니다).

이를 달성하기 위해 참조 후크를 사용해 보았습니다.

<올>

Collapsible 구성요소의 버튼에 참조를 추가하고 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 = 거짓;
}

3. 기본 애플리케이션에서 다음 버튼을 사용하세요.

<버튼 onClick = {openClick}>
   모두 확장
</버튼>
<버튼 onClick = {closeClick}>
   모든 축소
</버튼>

4. 렌더링 시 아코디언에 참조 추가:

<접이식 라벨=""level="content"innerRef={childRef}>

이것은 실제로 아무 작업도 수행하지 않습니다. 아마도 2단계에서 상태에 액세스하려고 했던 방식이 잘못되었기 때문일 것입니다. 하지만 시도해 볼 가치가 있다고 생각했습니다...

이것이 가능한지에 대한 아이디어가 있으신가요?

Answer 1

Redux를 사용할 수 있습니다.

1. 아코디언을 렌더링할 때 특정 ID를 부여하고 저장소에 저장하세요.
2. 슬라이스를 만들고openAllAccordions, ID를 반복하고 해당 ID에 속하는 아코디언을 open=true
로 설정합니다.
3. 슬라이스를 만들고closeAllAccordions, ID를 반복하고 해당 ID에 속한 아코디언을 open=false
로 설정합니다.

Answer 2

다소 임의적인 구성 요소 인스턴스 모음에서는 약간의 조정이 필요한 것이 일반적입니다. 제가 성공적으로 사용한 한 가지 방법은 구성 요소를 등록할 수 있는 관련 후크가 있는 Context를 만드는 것입니다. 이 후크는 공유 상태 보기와 필요에 맞게 해당 상태를 수정하는 함수를 반환합니다.

여기서 등록된 각 구성 요소에 대한 opener函数并提供openAll/closeAll함수를 저장하는 컨텍스트를 만들 수 있습니다.

으아악

...컨텍스트에 등록하고 친숙한 toggle/open 값을 반환하기 위해 각 하위 구성 요소에서 호출하는 후크도 있습니다.

으아악

또한 편리한 일괄 작업을 수행하기 위한 별도의 후크가 있습니다.

으아악

샌드박스

단순화를 위해 여기에서는 등록된 각 구성 요소의 고유 식별자로 별도의 opener（又名setOpen) 기능이 사용됩니다. 유연한 대안은 다른 식별자를 사용하는 것입니다. 그러면 탐색 중에 임의의 아코디언을 열고 닫을 수 있습니다.