React 里有一個非常常用的模式就是對組件做一層抽象。組件對外公開一個簡單的屬性（Props）來實現功能，但內部細節可能有非常復雜的實現。
可以使用?[JSX 展開屬性](http://reactjs.cn/react/docs/jsx-spread-zh-CN.html)?來合并現有的 props 和其它值：
~~~
return <Component {...this.props} more="values" />;
~~~
如果不使用 JSX，可以使用一些對象輔助方法如 ES6 的?`Object.assign`?或 Underscore`_.extend`。
~~~
return Component(Object.assign({}, this.props, { more: 'values' }));
~~~
下面的教程介紹一些最佳實踐。使用了 JSX 和 ES7 的還在試驗階段的特性。
## 手動傳遞
大部分情況下你應該顯式地向下傳遞 props。這樣可以確保只公開你認為是安全的內部 API 的子集。
~~~
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
React.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.body
);
~~~
但?`name`?這個屬性怎么辦？還有?`title`、`onMouseOver`?這些 props？
## 在 JSX 里使用?`...`?傳遞
有時把所有屬性都傳下去是不安全或啰嗦的。這時可以使用?[解構賦值](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)?中的剩余屬性特性來把未知屬性批量提取出來。
列出所有要當前使用的屬性，后面跟著?`...other`。
~~~
var { checked, ...other } = this.props;
~~~
這樣能確保把所有 props 傳下去，_除了_?那些已經被使用了的。
~~~
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` 包含 { onClick: console.log } 但 checked 屬性除外
return (
<div {...other} className={fancyClass} />
);
}
});
React.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.body
);
~~~
> 注意:
>
> 上面例子中，`checked`?屬性也是一個有效的 DOM 屬性。如果你沒有使用解構賦值，那么可能無意中把它傳下去。
在傳遞這些未知的?`other`?屬性時，要經常使用解構賦值模式。
~~~
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 反模式：`checked` 會被傳到里面的組件里
return (
<div {...this.props} className={fancyClass} />
);
}
});
~~~
## 使用和傳遞同一個 Prop
如果組件需要使用一個屬性又要往下傳遞，可以直接使用?`checked={checked}`?再傳一次。這樣做比傳整個?`this.props`?對象要好，因為更利于重構和語法檢查。
~~~
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
~~~
> 注意:
>
> 順序很重要，把?`{...other}`?放到 JSX props 前面會使它不被覆蓋。上面例子中我們可以保證 input 的 type 是?`"checkbox"`。
## 剩余屬性和展開屬性?`...`
剩余屬性可以把對象剩下的屬性提取到一個新的對象。會把所有在解構賦值中列出的屬性剔除。
這是?[ES7 草案](https://github.com/sebmarkbage/ecmascript-rest-spread)?中的試驗特性。
~~~
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
~~~
> 注意:
>
> 使用?[JSX 命令行工具](http://npmjs.org/package/react-tools)?配合?`--harmony`?標記來啟用 ES7 語法。
## 使用 Underscore 來傳遞
如果不使用 JSX，可以使用一些庫來實現相同效果。Underscore 提供?`_.omit`?來過濾屬性，`_.extend`?復制屬性到新的對象。?
~~~
javascript var FancyCheckbox = React.createClass({ render: function() { var checked = this.props.checked; var other = _.omit(this.props, 'checked'); var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; return ( React.DOM.div(_.extend({}, other, { className: fancyClass })) ); } });
~~~
