React 復合組件
阿新 • • 發佈:2017-08-10
epic 通過 lis 破壞 表達式 重新 搜索結果 reac script
var Avatar = React.createClass({ render: function() { return ( <div> <ProfilePic username={this.props.username} /> <ProfileLink username={this.props.username} /> </div> ); } }); var ProfilePic = React.createClass({ render: function() {return ( <img src={‘http://graph.facebook.com/‘ + this.props.username + ‘/picture‘} /> ); } }); var ProfileLink = React.createClass({ render: function() { return ( <a href={‘http://www.facebook.com/‘ + this.props.username}> {this.props.username} </a> ); } }); React.render(<Avatar username="pwh" />, document.getElementById(‘example‘) );
從屬關系
- 上面例子中,
Avatar
擁有ProfilePic
和ProfileLink
的實例 ,擁有者
就是給其它組件設置props
的那個組件 - 正式地說, 如果組件
Y
在render()
方法是創建了組件X
,那麽Y
就擁有X
- 組件不能修改自身的
props
- 它們總是與它們擁有者設置的保持一致。這是保持用戶界面一致性的關鍵性原則 - 把從屬關系與父子關系加以區別至關重要。從屬關系是 React 特有的,而父子關系簡單來講就是 DOM 裏的標簽的關系
- 例子中,
Avatar
擁有div
、ProfilePic
和ProfileLink
實例,div
是ProfilePic
和ProfileLink
實例的父級(但不是擁有者)
子級
實例化 React 組件時,你可以在開始標簽和結束標簽之間引用在 React 組件或者 Javascript 表達式:
<Parent><Child /></Parent>
Parent
能通過專門的 this.props.children
props 讀取子級。
動態子級
如果子組件位置會改變(如在搜索結果中)或者有新組件添加到列表開頭(如在流中)情況會變得更加復雜。如果子級要在多個渲染階段保持自己的特征和狀態,在這種情況下,你可以通過給子級設置惟一標識的 key 來區分
render: function() { var results = this.props.results; return ( <ol> {results.map(function(result) { return <li key={result.id}>{result.text}</li>; })} </ol> ); }
當 React 校正帶有 key 的子級時,它會確保它們被重新排序(而不是破壞)或者刪除(而不是重用)。 務必
把 key
添加到子級數組裏組件本身上,而不是每個子級內部最外層 HTML 上:
/ 錯誤! var ListItemWrapper = React.createClass({ render: function() { return <li key={this.props.data.id}>{this.props.data.text}</li>; } }); var MyComponent = React.createClass({ render: function() { return ( <ul> {this.props.results.map(function(result) { return <ListItemWrapper data={result}/>; })} </ul> ); } }); // 正確 :) var ListItemWrapper = React.createClass({ render: function() { return <li>{this.props.data.text}</li>; } }); var MyComponent = React.createClass({ render: function() { return ( <ul> {this.props.results.map(function(result) { return <ListItemWrapper key={result.id} data={result}/>; })} </ul> ); } });
- 也可以傳遞 object 來做有 key 的子級。object 的 key 會被當作每個組件的
key
。 - 要牢記 JavaScript 並不總是保證屬性的順序會被保留。實際情況下瀏覽器一般會保留屬性的順序,除了 使用 32 位無符號數字做為 key 的屬性。
- 數字型屬性會按大小排序並且排在其它屬性前面。
- React 渲染組件的順序就是混亂。可以在 key 前面加一個字符串前綴來避免:
render: function() { var items = {}; this.props.results.forEach(function(result) { // 如果 result.id 看起來是一個數字(比如短哈希),那麽對象字面量的順序就得不到保證。這種情況下,需要添加前綴,來確保 key 是字符串。 items[‘result-‘ + result.id] = <li>{result.text}</li>; }); return ( <ol> {items} </ol> ); }
React 復合組件