composition&inheritance in React

1655 단어
  • React 는 inheritance 를 사용 하지 않 고 extends 를 사용 해 야 하 는 모든 방안 은 JS 파일 을 단독으로 작성 한 다음 import
  • Composition(i.e. containment, specialization)

  • 관계 포함 (containment)
    구성 요소 가 하위 구성 요소 가 무엇 인지 모 르 면 용기 구성 요소 에서 흔히 볼 수 있 습 니 다. props. children 으로 하위 구성 요 소 를 전달 하 는 것 이 좋 습 니 다.
    
    function BoxContainer = () =>{
    
    return(
    
    
    
        {props.children}
    
    );
    
    }
    
    function ContentInsideboxContainer = () =>{
    
    return(
    
    
    
        

    Hello!

    Something inside here!
    ) }

    특례 관계 (specialization)
    I, e, welcome dialog 는 dialog 의 특례 이다.
    function Dialog = () =>{
    
    return(
    
    
    {props.title} {props.message} {props.children}
    ); } function WelcomeDialog = () =>{ return(

    This is a h1

    ); }

    class 에 도 사용 할 수 있 습 니 다.
    i.e.
    function Dialog = () =>{
    
    return(
    
    
    {props.title} {props.message} {props.children}
    ); }
    class WelcomeDialog extends[React.Component](http://react.component/){
    
        consturctor(props){
    
        super(props);
    
         this.state={
    
        login: ‘’,
    
        }
    
        }
    
    handleChange = (e) => {this.setState({login:e.target.value});}
    
    render(){
    
    return(
    
    
    
    
    
    );
    
    }}
    

    좋은 웹페이지 즐겨찾기