<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>