고유한 방식으로 props.children 배치

5629 단어 webdevnextjsreact
최근에 흥미로운 문제에 직면했습니다. 구성 요소를 사용하여 이러한 요소/구성 요소를 래핑하여 자식 구성 요소로 전달된 각 자식 요소를 배치할 수 있는 방법이 있는지 질문을 받았습니다. 질문의 구문은 다음과 같습니다.

모달 구성 요소가 있다고 가정해 봅시다. 그래서, 그것은 같을 것입니다,

무화과: 1




<Modal>
  <Header />
  <Body />
  <Footer />
</Modal>


이제 예상되는 출력은 이 코드의 출력과 유사해야 합니다.
(모달 구성 요소 내부)

무화과: 2



<div>
 <header>
  <Header />
 </header>
 <main>
  <Body />
 </main>
 <footer>
  <Footer />
 </footer>
</div>

이제 문제를 해결한 방법은 다음과 같습니다.
이런 경험이 없어서 해결 방법을 몰랐습니다. 하지만 색인을 통해 선택할 수 있다면 그렇게 할 수 있다고 생각했습니다. 그래서 저는 Next.js 애플리케이션을 가동하고 나중에 내 이론을 테스트했습니다. 짜잔! 내가 맞았 어. 여기에 표시된 것과 같은 출력(Fig: 2과 유사)을 얻을 수 있습니다.

무화과: 3



const Modal = ({children}) => {

 return (
   <div>
    <header>
     { children[0] }
    </header>
    <main>
     { children[1] }
    </main>
    <footer>
     { children[2] }
    </footer>
  </div>
 )
}

비슷하게:

const Modal = ({children}) => {
/**
* @desc assigning each array element to a variable;
*/
 const [header, body, footer] = children;

 return (
   <div>
    <header>
     { header }
    </header>
    <main>
     { body }
    </main>
    <footer>
     { footer }
    </footer>
  </div>
 )
}


요소를 전달하거나 그러한 출력을 달성하는 가장 좋은 방법이 아닐 수도 있습니다. 그러나 그것은 독특한 방법이며 당신은 결코 알지 못합니다. 이것에 대한 사용 사례가 있을 수 있습니다. 작동 데모는 다음과 같습니다. Click here!
데이터 구조 및 알고리즘 - 슬라이딩 윈도우 패턴
Java에서 다음 Cumulocity 마이크로서비스 프로젝트를 시작하세요.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage