组件开发

在一个应用当中，定会有许多结构类似的模块，如果我们每一次都粘贴，复制，将会是一片混论，也会使得应用变得非常庞大，所以，我们要有组件化开发的思想！
例如：

按钮

那我们就可以将这个按钮独立成一个类:

class SureBtn extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div style={styles}>
                确认支付
            </div>
        )
    }
}
module.exports = SureBtn;

那么，问题来了如果是充值按钮呢？我们就需要将文字设置成动态的，由其父组件传递，告诉它，应该显示虾米文字

 确认支付 -------->{this.props.text}

//父组件使用时：
 <SureBtn text="立即充值" />

还没有结束呢，仅仅是问文字变了，那如果有的按钮较大，有的较小，肿么办？？？
例如这样的：

小圆样儿

样式肿么修改，要再写一遍吗? No！
我们可以借鉴修改文字的思路，样式由父组件传递（部分可能会发生改变的，也就是说，我们可以定义默认样式的哦）

//定义一些默认的样式
 var styles={
            background:"#4964EF",
            lineHeight:"0.8rem",
            borderRadius:"0.08rem",
        }
//将父组件的样式合并到默认样式中，assign会将addStyle合并在style的后面，
//so，默认样式中已有的部分会被重写
 Object.assign(styles,this.props.addStyle);
 <div style={styles}>
      {this.props.text}
 </div>

最终组件的代码如下：

class SureBtn extends Component{
    constructor(props){
        super(props)
    }
    render(){
        var styles={
            background:"#4964EF",
            lineHeight:"0.8rem",
            borderRadius:"0.08rem",
        }
        Object.assign(styles,this.props.addStyle);
        //组件需要修改的样式定义在名为addStyle的对象中
        return(
            <div style={styles}>
                {this.props.text}
            </div>
        )
    }
}
module.exports = SureBtn;


//使用时：
 <SureBtn text="立即充值" addStyle={styles} />
  const styles ={
      margin:"0.9rem 0.6rem"
  }

推荐阅读更多精彩内容