composition&inheritance in React

• React 不用inheritance，所有需要用extends的方案都可以单独写一个JS文件然后import

• Composition(i.e. containment, specialization)

包含关系（containment）

组件如果不知道子组件会有什么，常见于容器组件，那么最好用props.children将子组件传递

function BoxContainer = () =>{

return(

<box className = {'fancybox' + props.color}>

    {props.children}

</box>);

}

function ContentInsideboxContainer = () =>{

return(

<BoxContainer color=“blue">

    <h1 className=“welcome”>

    Hello!

    </h1>

    <o className=“param”>

    Something inside here!

   </p>

</BoxContainer>

) 

}

特例关系(specialization)

I,e, welcome dialog是dialog的特例

function Dialog = () =>{

return(

<div className=“dialog">

    {props.title}

    {props.message}

    {props.children}

</div>);

}

function WelcomeDialog = () =>{

return(

<Dialog title=“welcome” message=“hello”>

<h1>

This is a h1

</h1>

</Dialog>);

}

也可以用于class，

i.e.

function Dialog = () =>{

return(

<div className=“dialog">

    {props.title}

    {props.message}

    {props.children}

</div>);

}

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(

<Dialog title=“welcome” message=“hello”>

<input onChange={this.handleChange}>

</Dialog>);

}}