Button 组件

使用之前我们 react + typescript 搭建的脚手架来写我们第二个 Button 组件, 在写第二个组件之前, 我们先分析一下, 我们写好后用户该怎么使用我们的 Button 组件, 我们先来弄一个用例图

Button用例图

文件目录做一个说明

index.jsx 测试使用我们自己写的 Button 组件
Button/button.tsx 写我们Button 组件的文件
Button/button.scss 写我们Button组件的样式

开始最重要的编程工作

我们按照我们自己的用例图, 来一点点的完善我们的代码, 第一个,我们先创建一个最基本的Button

有一个最基础的样式

先在我们的 index.tsx 里面使用我们自己写的 Button组件

import React from "react";
import Button from './Button/button.tsx'

const ButtonDemo = () => {
  return (
    <div>
      <Button>普通按钮</Button>
      <Button>我是按钮</Button>
    </div>
  )
}

在button.tsx 组件里面写我们的源代码

import React from "react";
import './Button/button.scss'

interface ButtonProps {
  children: React.ReactNode
}

// props 是用户传给我们的参数
const Button: React.FC<ButtonProps> = props => {
  const { children } = props
  return (
    <button className="yym-button">{ children }</button>
  )
}

export default Button

上面的代码完成后, 我们可以在页面上看到两个特别丑的按钮, 我们需要让它变好看一点, 给点默认样式,

// button.scss
.yym-button {
    margin: 0 8px;
  padding: 8px 12px;
  color: #575757;
  border: none;
  border-radius: 6px;
  background: #f7f7fa;
  font-size: 14px;
  // 用例图上面 按钮 有三个效果
  &:hover {
    background: #e5e5ea;
  }
  &:focus {
    outline: none;
  }
  &:active {
    background: #d9d9d9;
  }
}

可以添加 type, 展示不同的状态

上面三个文件的初步完成, 我们可以看到, 页面上会有一个灰色的按钮, 看着比默认的按钮好看多了,嘿嘿, 根据用例图,我们来完善添加type, 展示不同的类型, 样式可以参考antd element 等UI组件库

首先分析一下, 我们添加type = 'primary' | type = 'danger', 是不是 Button 样式的变化, 背景颜色, 样式的变化, 交互上没有变化, 而type = 'link' 时交互上会有变化, 样式也会有一点点不同,
所以我们先完成当type = 'primary' | type = 'danger' 的样式变化, 那改怎么变呢? 我们可以通过用户props 不同, 来改变Button 的 className

// index.tsx
const ButtonDemo = () => {
  return (
    <div>
      <Button>普通按钮</Button>
      <Button>我是按钮</Button>
      <Button type="primary">主要按钮</Button>
      <Button type="danger">危险按钮</Button>
    </div>
  )
}

// button.tsx
import classnames from 'classnames'

interface ButtonProps {
  children: React.ReactNode
  // 可选参数
  type?: 'primary' | 'danger' | 'link'
}

// props 是用户传给我们的参数
const Button: React.FC<ButtonProps> = props => {
  const { children, type } = props
  
  const classes = classnames('yym-button', {
    // type 存在, 添加对应的 class
    [`yym-button-${type}`]: type,
  })
  return (
    <button className={classes}>{ children }</button>
  )
}

// button.scss
// 默认样式
.yym-button {
    margin: 0 8px;
  padding: 8px 12px;
  color: #575757;
  border: none;
  border-radius: 6px;
  background: #f7f7fa;
  font-size: 14px;
  // 用例图上面 按钮 有三个效果
  &:hover {
    background: #e5e5ea;
  }
  &:focus {
    outline: none;
  }
  &:active {
    background: #d9d9d9;
  }
  
  // 不同的 type 样式
  // 根据权重, 会覆盖默认的样式
  &.yym-button-primary {
    // type = primary 样式
    color: #fff;
    background: #3498ff;
    &:hover {
      background: #2589f5;
    }
    &:active {
      background: #1675e0;
    }
  }
  
  &.yym-button-danger {
    // type = danger 样式
    color: #fff;
    background: #ff7875;
    &:hover {
      background: #e4383a;
    }
    &:active {
      background: #d42926;
    }
  }
}

上面的样式已经完成了 type = 'primary' | 'danger' 的交互, 那当 type = 'link' 时我们知道样式已经不是一个按钮了, 而是一个可点击的链接, 类似于 <a>, 那我们在代码中该怎么弄呢?

// button.tsx
import classnames from 'classnames'

interface ButtonProps {
  children: React.ReactNode
  type?: 'primary' | 'danger' | 'link'
}

const Button: React.FC<ButtonProps> = props => {
  const { children, type } = props
  
  const classes = classnames('yym-button', {
    [`yym-button-${type}`]: type,
  })
  return (
    // 修改我们的 html, 当 type = 'link' 时, 使用 a 标签
    <>
      {
        type === 'link' ? (
          <a target="_blank" className={classes}>
            {children}
          </a>
        ) : (
          <button className={classes}>{ children }</button>
        )
      }
    </>
    
  )
}

// button.scss
.yym-button {
  margin: 0 8px;
  padding: 8px 12px;
  color: #575757;
  border: none;
  border-radius: 6px;
  background: #f7f7fa;
  font-size: 14px;
  &:hover {
    background: #e5e5ea;
  }
  &:focus {
    outline: none;
  }
  &:active {
    background: #d9d9d9;
  }
  
  // 不同的 type 样式
  // 根据权重, 会覆盖默认的样式
  &.yym-button-primary {
    // type = primary 样式
    color: #fff;
    background: #3498ff;
    &:hover {
      background: #2589f5;
    }
    &:active {
      background: #1675e0;
    }
  }
  
  &.yym-button-danger {
    // type = danger 样式
    color: #fff;
    background: #ff7875;
    &:hover {
      background: #e4383a;
    }
    &:active {
      background: #d42926;
    }
  }
  // 当 type = link 时, a 链接的样式
  &.yym-button-link {
    color: #1675e0;
    background: none;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:active {
      text-decoration: none;
      color: #004299;
    }
  }
}