거기에 반응하는 템플릿이있는 방법이 있습니다

Question

템플릿 종류와 같은 요소를 만들었습니다. (예 : 맨 위에 이미지가있는 썸네일 컨테이너와 그 사이에 동적 콘텐츠가있는 꼬리말에있는 문자) 동적 콘텐츠는 상태에 따라 DOM 요소 유형이 다를 수 있습니다. 나는 동적 인 부분을 "주사"하는 렌더링 방법에 로직을 추가하여 작업을했습니다. 다른 반응 구성 요소를 반환하는 렌더링 메서드에서 논리를 갖는 것이 합리적입니까? 더 나은 템플릿 작성 방법이 있습니까? .! 나는 여기에 언급 된 코드입니다 (커피 스크립트) :

(난이 기능을 추가 할 프로젝트를 찾는 게 아니에요, 소위 할 수있는 "방법으로 반응" 감사

편집이 있는지 알고 싶어

internalContent: -> 
    switch @props.title 
    when "title1" then SomeReactFactory(props) 
    when "title2" then SomeOtherReactFactory(props) 

render -> 
    ... 
    DOM.div 
    className: 'panel' 
    @internalContent() 

는 internalContent() 방법은 동적으로 일부는 소품이 특정 도메인을 대상으로 그것의 반작용 방법 .. 그리고 당신이해야 사용하는 것입니다

Answer 1

에 따라 구성 요소 반응 추가하고있다.

예 A 버튼에 들어 반응하는 coul 다음과 같이 쓸 수 D :

const MyButton = ({ text, type = "normal", color = "blue", onClick }) => { 
    return (
     <button 
     onClick={onClick} 
     style={{backgroundColor: color }} 
     className={"my-button my-button--type" + type}> 
      {text} 
    </button>); 
}; 

또는 레이아웃 구성 요소 :

const MyLayout = ({side, nav, main}) => { 
    return (
     <div className="container"> 
     <nav>{nave}</nav> 
     <aside>{side}</aside> 
     <div className="main">{main}</div> 
     </div> 
    ) 
} 

이제 복합이이 같은 예를 들어 수

class App extends Component { 
    ... 

    render() { 
    <MyLayout 
     nav={<MyNav/>} 
     side={<MySideBar items={...} />} 
     main={<MyButton onClick={this.onClick} text="Main Button"} 
    /> 
    } 
} 

그나마 큰 모든 것을 포장하려고 모든 것을 할 수있는 컴포넌트, React의 속임수는 작은 재사용 가능한 컴포넌트를 만들고 합성하는 것입니다.

많은 프로젝트에서 사용할 수있는 많은 구성 요소를 만들 수도 있습니다.