모든 아코디언을 켜고 끄는 버튼을 어떻게 설정하나요?
<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>