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

25、展开属性

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

JSX 向ECMAScript6 借鉴了一项实用的特性，称为展开运算符（spread operator）。

JSX 向ECMAScript6 借鉴了一项实用的特性，称为展开运算符（spread operator）。当你定义属性时，可以使用这种便捷的方法。

假设你需要把一系列属性传递给`<a> `标签组件：
```
var attr = {
href: 'http://example.org',
target: '_blank',
};
```
你当然可以这样写：
```
return (
<a
href={attr.href}
target={attr.target}>
Hello
</a>
);
```
但是这种写法过于冗余。使用展开运算符，只需一行代码即可完成相同的功能：
```
return <a {...attr}>Hello</a>;
```

在这个例子中，你（可能根据某些特定条件）提前定义了一个属性对象。这通常是独立使用该组件时的情况；但更常见的使用场景是，从组件外部取得这个对象属性——通常是从父组件传递过来的属性。接下来我们就来看看这种情况。

### 在父子组件之间使用展开属性
假设你正在构建一个FancyLink 组件，其内部使用的是常规的`<a>` 标签实现。你希望组件可以接收所有`<a>` 标签可接收的属性（包括href、style、target 等）以及一些额外的属性（比如size）。然后其他用户可以这样使用你的组件：
```
<FancyLink
href="http://example.org"
style={ {color: "red"} }
target="_blank"
size="medium">
Hello
</FancyLink>
```
这时，你的render() 函数应该如何利用展开属性的优势，避免重新定义`<a> `标签的所有属性呢？
```
var FancyLink = React.createClass({
render: function() {
switch(this.props.size) {
// 基于size属性进行一些处理
}
return <a {...this.props}>{this.props.children}</a>;
}
});
```
注意到this.props.children 的使用了吗？这是一个简单方便的方法，允许你传递任意数量的子节点到组件中，并通过这个属性在组合界面时访问其内容。

在前面这个代码片段中，你基于size 属性进行了一些自定义处理，然后把所有属性简单地传递给`<a>` 标签。这当中也包含了size 属性。React.DOM.a 中没有size 的概念，因此会自动忽略这个属性，并用上其他所有属性。
你可以对代码进行一些改进，避免传递不必要的属性：
```
var FancyLink = React.createClass({
render: function() {
switch(this.props.size) {
// 基于size属性进行一些处理
}
var attribs = Object.assign({}, this.props); // 浅复制
delete attribs.size;
return <a {...attribs}>{this.props.children}</a>;
}
});
```
使用ECMAScript7 提议的语法（和前面一样无需额外的工作，Babel 可以进行转换！）可以让代码进一步简化，无需进行对象复制：
```
var FancyLink = React.createClass({
render: function() {
var {size, ...attribs} = this.props;
switch (size) {
// 基于size 属性进行一些处理
}
return <a{...attribs}>{this.props.children}</a>;
}
});
```