>  Q&A  >  본문

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

<p>다음 코드를 사용하여 축소 가능한 아코디언을 생성하는 구성요소가 있습니다. </p> <pre class="brush:php;toolbar:false;">'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> ) } 기본 축소 가능 내보내기;</pre> <p>주 애플리케이션의 여러 위치에서 사용하고 때로는 다른 아코디언에서도 사용합니다. 여러 경우에 아코디언은 데이터를 기반으로 동적으로 렌더링되었기 때문에 실제로 페이지에 얼마나 많은 아코디언이 있는지 전혀 알 수 없었습니다. 이를 염두에 두고 고정된 수를 설정하지 않고 기본 응용 프로그램에서 모든 아코디언(예: 다른 구성 요소의 일부 아코디언)을 렌더링하지 않고도 모든 아코디언을 켜고 끄는 버튼을 기본 응용 프로그램에 만들고 싶습니다. 그런 다음 기본 애플리케이션으로 가져옵니다). </p> <p>이를 달성하기 위해 참조 후크를 사용해 보았습니다. </p> <올> <li>Collapsible 구성요소의 버튼에 참조를 추가하고 props를 통해 상위 구성요소에서 액세스합니다. </li> </ol> <pre class="brush:php;toolbar:false;"><button className={props.level} onClick={toggle} ref={props.innerRef}>{props.label}</button> ;</pre> <ol start="2"> <li>기본 애플리케이션에 다음 참조를 추가하세요. </li> </ol> <pre class="brush:php;toolbar:false;">const childRef = useRef(); const openClick = () => childRef.state = true; } const closeClick = () => childRef.state = 거짓; }</pre> <ol start="3"> <li>기본 애플리케이션에서 다음 버튼을 사용하세요. </li> </ol> <pre class="brush:php;toolbar:false;"><버튼 onClick = {openClick}> 모두 확장 </버튼> <버튼 onClick = {closeClick}> 모든 축소 </버튼></pre> <ol start="4"> <li>렌더링 시 아코디언에 참조 추가: </li> </ol> <pre class="brush:php;toolbar:false;"><접이식 라벨=""level="content"innerRef={childRef}></pre> <p>이것은 실제로 아무 작업도 수행하지 않습니다. 아마도 2단계에서 상태에 액세스하려고 했던 방식이 잘못되었기 때문일 것입니다. 하지만 시도해 볼 가치가 있다고 생각했습니다...</p> <p>이것이 가능한지에 대한 아이디어가 있으신가요? </p>
P粉391677921P粉391677921437일 전642

모든 응답(2)나는 대답할 것이다

  • P粉441076405

    P粉4410764052023-08-31 15:23:23

    Redux를 사용할 수 있습니다.

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

    회신하다
    0
  • P粉809110129

    P粉8091101292023-08-31 12:37:09

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

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

    으아악

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

    으아악

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

    으아악

    샌드박스

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

    회신하다
    0
  • 취소회신하다