React之props屬性
React 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性(Props)來實現功能,但內部細節可能有非常複雜的實現。
可以使用 JSX 展開屬性 來合併現有的 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.getElementById(`example`)
);
但 name
這個屬性怎麼辦?還有 title
、onMouseOver
這些 props?
在 JSX 裡使用 ...
傳遞
有時把所有屬性都傳下去是不安全或囉嗦的。這時可以使用解構賦值中的剩餘屬性特性來把未知屬性批量提取出來。
列出所有要當前使用的屬性,後面跟著 ...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.getElementById(`example`)
);
注意:
上面例子中,
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"
。
剩餘屬性和展開屬性 ...
剩餘屬性可以把物件剩下的屬性提取到一個新的物件。會把所有在解構賦值中列出的屬性剔除。
這是 JSX 命令列工具 配合 --harmony
標記來啟用 ES7 語法。
使用 Underscore 來傳遞
如果不使用 JSX,可以使用一些庫來實現相同效果。Underscore 提供 _.omit
來過濾屬性,_.extend
複製屬性到新的物件。
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 }))
);
}
});
相關文章
- 深入解析React props和state屬性React
- VUE3 之 Non-Props 屬性Vue
- React Native 探索(三)元件的 Props (屬性) 和 State (狀態)React Native元件
- 使用屬性Props完成一張卡片
- React 元件屬性React元件
- react 元件的屬性React元件
- CMake 屬性之全域性屬性
- react進階元件之Render Props小結React元件
- [譯]React高階話題之Render PropsReact
- React Native基礎之props,state,styleReact Native
- React屬性用法總結React
- [React]屬性和狀態React
- React Render Props 模式React模式
- React之配置元件的props(兩個例項)React元件
- CMake 屬性之目標屬性
- CMake 屬性之目錄屬性
- 為什麼更新父元件的非props屬性,子元件 props watch 會觸發?元件
- react-native 之 state 和 props 以及 redux 和 react-reduxReactRedux
- React專題:不可變屬性React
- React戰記之玩轉Flex佈局(上篇–容器屬性)ReactFlex
- React戰記之玩轉Flex佈局(上篇--容器屬性)ReactFlex
- React的this.props.childrenReact
- React中render Props模式React模式
- Render Props - New pattern in ReactReact
- 監聽 watch props物件屬性監聽 或深度監聽物件
- vue3 父元件【屬性】傳值給子元件【props】接收Vue元件
- WPF 之 依賴屬性與附加屬性(五)
- React學習手記2-屬性校驗和預設屬性React
- React Native 自定義元件及屬性React Native元件
- React 深入系列3:Props 和 StateReact
- 【譯】TypeScript中的React Render PropsTypeScriptReact
- React.js 實戰 - 元件 & PropsReactJS元件
- [譯] 理解 React Render Props 和 HOCReact
- orcale 之遊標的屬性
- Android屬性之excludeFromRecentsAndroid
- 【全棧React】第8天: 屬性型別全棧React型別
- React入門系列 - 3 state與propsReact
- react 也就這麼回事 05 —— 元件 & PropsReact元件