이러한 방식으로 여러 개의 반응 구성 요소를 중첩하면 안티 패턴으로 간주 될 수 있습니까?

Question

여러 반응 구성 요소가 중첩되어 있다고 가정 해 봅시다. devs가 전체 구성 요소 계층을 거치지 않고도 구성 요소가 중첩 된 방식을 명확하게 나타내려고합니다.

그래서 그 대신이 일을 :

는

<Header logo=logoComponent nav=navComponent /> 

나는이 작업을 수행 할 수 있습니다 : 다음과 같이 사용할 수 있습니다

import React from 'react'; 
import styles from "./index.css"; 

export default React.createClass({ 
    // Get component by key 
    getComponent(key) { 
    return this.props.children.filter((comp) => { 
      return comp.key === key; 
    }); 
    } 

    render: function() { 
    return (
     <header className={styles.root}> 
     <div className={styles.logo}> 
      {this.getComponent('logo')} 
     </div> 
     <div className={styles.nav}> 
     {this.getComponent('navbar'} 
     </div> 
     </header> 
    ); 
    } 
}); 

가 :

export default React.createClass({ 
    render: function() { 
    return (
     <Header> 
     <Logo key="logo"/> 
     <Navbar key="navbar"/> 
     </Header> 
    ); 
    } 
}); 

은 분명히이 솔루션은 약간입니다 관습. 그러나 개발자가 HTML과 같이 구성 요소가 중첩되는 방식을 즉각적으로 이해할 수 있습니다.

이렇게 내가 이런 방식으로 사용한다면 반응을 가장 잘 이용하는 방법을 오해하고 있습니까? 동일한 유형의 중첩을 달성하는 더 좋은 방법이 있습니까? 아니면 여러 자식 구성 요소를 속성으로 전달하기 만하면되는 무언가가 있습니까? 여러 영역으로 아이들을 렌더링 할 때이 같은 경우에 본 것을

는

Answer 1

주 하나에서 몇 가지 "래퍼"구성 요소를 내보내는 것입니다 - HeaderLogo 및 HeaderNavbar처럼 다음과 같이 사용

<Header> 
    <HeaderLogo ... /> 
    <HeaderNavbar ... /> 
</Header> 

이것들이 너무 부서지기 쉽기 때문에 심판으로 가지 않을 것입니다. 그러나 클래스 검사 또는 덜 침략적이고 최종 사용자로부터 더 캡슐화 된 것이 무엇이든 - 또는 "올바른 것"을 찾지 않고 모든 어린이를 렌더링 할 수도 있습니다.

구성 요소가 직접 자식이 이러한 "래퍼"구성 요소 일 수 있다는 비공식적 인 계약이 있어도 좋습니다.