组件封装

自定义按钮封装

./components/btn/MyButton.js

import React, { Component } from 'react'
import cn from 'classname'
import './MyButton.css'
export default class MyButton extends Component {
    render() {
        console.log('this.props',this.props)
        const { type,danger,onClick,icon } = this.props
        return (
            <button  onClick={onClick} className={cn({btn: true,['btn-'+type]: type?true:false,'btn-danger': danger})}>
                
                {icon}    {this.props.children} 
                
            </button>
        )
    }
}

./components/btn/MyButton.css

/* OOCSS */
.btn{
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
    background: none;
    border: none;
}
.btn.btn-danger{
    border: 1px solid red;
    color: red;
}
.btn.btn-primary{
    background: #ccc;
}
.btn.btn-primary.btn-danger{
    background: red;
    color: white;
}
.btn.btn-dashed.btn-danger{
    border: 1px dashed red;
    background: white;
    color: red;
}

./components/btn/index.js

import MyButton from './btn/MyButton'

export  {
    MyButton
}