composition&inheritance in React

• 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(





);

}}