赵走x博客 - 开发者的网上家园

35、构建实例应用：Button组件

资源编号:76085 书籍 React快速上手开发热度：85

毫不夸张地说，每个应用都离不开按钮组件。

毫不夸张地说，每个应用都离不开按钮组件。我们通常使用原生的`<button>` 标签按钮，但有时候可能不得不使用`<a>` 标签按钮，在第3 章中用到的下载按钮就属于后者。让我们创建一个更通用的`<Button> `按钮组件，接收一个可选的href 属性，以应对这两种情况吧。
如果href 属性存在，则渲染`<a>` 标签按钮。
本着测试驱动开发（test-driven development，TDD）的思想，你可以先在discovery.js 工具中定义这个组件的示例用法。
修改前：
```
import Logo from './components/Logo';
{/* ... */}
{/* 可以在这里放置更多的组件示例 */}
```
修改后：
```
import Button from './components/Button';
import Logo from './components/Logo';
{/* ... */}
		<h2>Buttons</h2>
        <div>Button with onClick:<Button onClick={()=>alert('ouch')}>Click me</Button></div>
        <div>A link:<Button href="http://www.baidu.com">Follow me</Button></div>
        <div>Custom class name:<Button className="custom">I do nothing</Button></div>
{/* 可以在这里放置更多的组件示例 */}
```
［或许我们可以把这种方式称为发现驱动开发（discovery-driven development，DDD）？］

注意到上述代码中的() => alert('ouch') 模式了吗？这是ES2015 中箭头函数的一种示例用法。

以下是箭头函数的其他用法。
*  () => {}　这是一个空函数，和function() {} 类似。
*  (what, not) => console.log(what, not)　这是一个带参数的函数。
*  (a, b) => { var c = a + b; return c;}　当函数体中包含多个语句的时候，需要使用花括号{} 包裹。
*  let fn = arg => {}　当函数只接收一个参数时，可以省略圆括号()。

# 　Button.css
根据之前的约定，`<Button>` 组件的样式应该放在/css/components/Button.css 文件中。这个文件没有什么特别的地方，只包含了一些用于美化的CSS 样式。这里仅列出一套样式作为示范，接下来将不再花费时间详述其他组件的CSS 样式：
```
.Button {
  background-color: #6f001b;
  border-radius: 28px;
  border: 0;
  box-shadow: 0px 1px 1px #d9d9d9;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  transition-duration: 0.1s;
  transition-property: transform;
}

.Button:hover {
  transform: scale(1.1);
}
```

# Button.js
首先完整阅读一遍/js/source/components/Button.js 的源代码：
```
import classNames from 'classnames';
import React from 'react';
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'

function Button(props) {
  const cssclasses = classNames('Button', props.className);
  return props.href
      ? <a {...props} className={cssclasses} />
      : <button {...props} className={cssclasses} />;
}

Button.propTypes = {
  href: PropTypes.string,
};

export default Button
```
这个组件虽然代码量不多，但是代码中出现了许多新的概念和语法。让我们从头开始分析
这段代码！
### 1. classnames 包
```
import classNames from 'classnames';
```
（通过npm i --save-dev classnames 安装的）classnames 包提供了一个处理CSS 类名的辅助函数。我们经常会碰到这种情况：要让组件既拥有自身的类名，又能从父组件灵活地接收自定义的类名。在过去，React 的插件包可以完成这项任务，但现在我们更推荐使用classnames 这个第三方包来完成。classnames 的使用方式很简单，只需要一个函数：
```
const cssclasses = classNames('Button', props.className);
```
在创建组件时，这行代码负责把类名Button 和传递进来的任意类名（如果有的话）合并起来（如图6-3 所示）。

![bs64](https://img.handsomemark.com/2019/11/13/a902e128-05c7-11ea-be2f-0242ac140002.png)
图6-3：带有自定义类名的`<Button> `组件
你也可以选择不依赖第三方包，自己进行类名的拼接，但classnames 对其稍微进行了封装，让你可以更加方便地完成这项工作。此外，它还让你可以根据条件有选择地设定类名，用法也很方便，比如：
```
<div className={classNames({
	'mine': true, // 总是包含该类名
	'highlighted': this.state.active, // 根据组件的state 决定
	'hidden': this.props.hide, // 也可以根据props 决定
})} />
```
### 2. 解构赋值
书上是这样讲的，但是我已经替换了，因为 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。这里留下来只是为了说明这个js用法。

```
import React, {PropTypes} from 'react';
```
上述语句是以下声明方法的简写形式：
```
import React from 'react';
const PropTypes = React.PropTypes;
```

### 3. 无状态函数式组件
当一个组件的功能非常简单（这没有任何不妥之处）且不需要维护状态时，可以选择使用函数定义这个组件。函数体的内容等价于render() 方法中的内容。该函数接收的第一个参数包含了所有属性——这就是在函数体中使用props.href，而非使用类或对象中this.props.href 的原因。
可以使用箭头函数对函数进行重写：
```
const Button = props => {
// ...
};
```
还可以把函数体简化为一句话，进而省略{}、; 和return：
```
const Button = props => 
  props.href
    ? <a {...props} className={classNames('Button', props.className)}/>
    : <button {...props} className={classNames('Button', props.className)}/>
```
### 4. propTypes
如果你使用了ES2015 的类或者函数式组件的语法，你需要在组件定义后，把类似propTypes 这样的属性以静态属性的方式进行定义。
旧版语法（ES3、ES5）：
```
var PropTypes = React.PropTypes;
var Button = React.createClass({
propTypes: {
href: PropTypes.string
},
render: function() {
/* 渲染 */
}
});
```
新版语法（ES2015 的类）：
```
import React, {Component, PropTypes} from 'react';
class Button extends Component {
	render() {
	/* 渲染 */
	}
}
Button.propTypes = {
	href: PropTypes.string,
};
```
如果使用无状态函数式组件，用法如下：
```
import React, {Component, PropTypes} from 'react';
	const Button = props => {
	/* 渲染 */
	};
	Button.propTypes = {
		href: PropTypes.string,
};
```