React 里有一個(gè)非常常用的模式就是對組件做一層抽象。組件對外公開一個(gè)簡單的屬性(Props)來實(shí)現(xiàn)功能,但內(nèi)部細(xì)節(jié)可能有非常復(fù)雜的實(shí)現(xiàn)。
可以使用 JSX 展開屬性 來合并現(xiàn)有的 props 和其它值:
return <Component {...this.props} more="values" />;
如果不使用 JSX,可以使用一些對象輔助方法如 ES6 的 Object.assign
或 Underscore _.extend
。
return Component(Object.assign({}, this.props, { more: 'values' }));
下面的教程介紹一些最佳實(shí)踐。使用了 JSX 和 ES7 的還在試驗(yàn)階段的特性。
大部分情況下你應(yīng)該顯式地向下傳遞 props。這樣可以確保只公開你認(rèn)為是安全的內(nèi)部 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.getElementById('example')
);
但 name
這個(gè)屬性怎么辦?還有 title
、onMouseOver
這些 props?
...
傳遞有時(shí)把所有屬性都傳下去是不安全或啰嗦的。這時(shí)可以使用解構(gòu)賦值中的剩余屬性特性來把未知屬性批量提取出來。
列出所有要當(dāng)前使用的屬性,后面跟著 ...other
。
var { checked, ...other } = this.props;
這樣能確保把所有 props 傳下去,除了 那些已經(jīng)被使用了的。
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.getElementById('example')
);
注意:
上面例子中,
checked
屬性也是一個(gè)有效的 DOM 屬性。如果你沒有使用解構(gòu)賦值,那么可能無意中把它傳下去。
在傳遞這些未知的 other
屬性時(shí),要經(jīng)常使用解構(gòu)賦值模式。
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 反模式:`checked` 會(huì)被傳到里面的組件里
return (
<div {...this.props} className={fancyClass} />
);
}
});
如果組件需要使用一個(gè)屬性又要往下傳遞,可以直接使用 checked={checked}
再傳一次。這樣做比傳整個(gè) this.props
對象要好,因?yàn)楦谥貥?gòu)和語法檢查。
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 前面會(huì)使它不被覆蓋。上面例子中我們可以保證 input 的 type 是"checkbox"
。
...
剩余屬性可以把對象剩下的屬性提取到一個(gè)新的對象。會(huì)把所有在解構(gòu)賦值中列出的屬性剔除。
這是 ES7 草案 中的試驗(yàn)特性。
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
注意:
使用 JSX 命令行工具 配合
--harmony
標(biāo)記來啟用 ES7 語法。
如果不使用 JSX,可以使用一些庫來實(shí)現(xiàn)相同效果。Underscore 提供 _.omit
來過濾屬性,_.extend
復(fù)制屬性到新的對象。
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 }))
);
}
});