2015
Sep
25




React render HTML 方式,是把 JS 與 HTML , CSS Style 混在一起寫,所以剛開始使用的時候常常用方式,造成程式錯誤,這篇文章會說明 React Render 部分的寫法。

Single ForLoop

先來介紹如何用單層迴圈來 Render 一個列表,方法很簡單,去 React 官網也可以找到很多範例,只要用大括號 "{}" 就能完成這個功能。

{list.map(function (val, index) { ... } }

來寫一段 React 程式碼,我希望能夠水平顯示出一排圖片,就像下面這個 Demo 頁。


以下是實作的原始碼:

Single for loop render
  1. render: function() {
  2. var img = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p50x50/10390028_10102210419817761_5871103530921178170_n.jpg?oh=2250e4b8512bcdb3cd20675cd0fc7c76&oe=569E6D23&__gda__=1453290568_8a1813e8716960d2912d543217bbf197";
  3. var list = [{},{},{},{},{},{},{},{},{},{}];
  4. var name = "Mark Zuckerberg";
  5. return (
  6. <View style={{height: 500, with: 500, flex: 1, alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', flexWrap: "wrap", marginTop: 180, marginLeft: 20}}>
  7. {list.map(function (val, index) {
  8. if (name.length > 5) {
  9. name = name.substr(0, 5);
  10. }
  11. return <View style={{textAlign: "center", width: 49, borderWidth: 2, borderColor: "#000", borderStyle: "solid"}}>
  12. <Image
  13. source={{uri: img}}
  14. style={{width: 45, height: 45}}
  15. />
  16. <Text style={{textAlign: "center", fontSize: 10, weight: "bold", color: "#aaaa00", width: 49}}> {name} {index} </Text>
  17. </View>
  18. })}
  19. </View>
  20. );
  21. }

Double Forloop

上一個範例中只有單純的一排圖片,當圖片超過螢幕的寬度時,圖片會自動換到下一行,如果我希望一排最多只放五張圖片,這時就可以改用 Double Forloop 來實現。

Demo 圖:

這個範例我多加了一些 CSS ,美化一下排版,以下是實作的原始碼:

Double Forloop
  1. var movie = React.createClass({
  2. render: function() {
  3. var img = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p50x50/10390028_10102210419817761_5871103530921178170_n.jpg?oh=2250e4b8512bcdb3cd20675cd0fc7c76&oe=569E6D23&__gda__=1453290568_8a1813e8716960d2912d543217bbf197";
  4. var list = [];
  5. list.push([{},{},{},{},{}]);
  6. list.push([{},{},{},{},{}]);
  7. var name = "Mark Zuckerberg", template;
  8. return (
  9. <View style={{marginTop: 80, flex: 0}}>
  10. {list.map(function (l, index) {
  11. return (
  12. <View style={{flex: 1, height: 70, justifyContent: 'space-around', flexDirection: 'row', flexWrap: "wrap", marginBottom: 20}}>
  13. {l.map(function (val, index2) {
  14. if (name.length > 4) {
  15. name = name.substr(0, 4);
  16. }
  17. return <View style={{textAlign: "center", borderWidth: 2, borderColor: "#066", borderStyle: "solid"}}>
  18. <Image
  19. source={{uri: img}}
  20. style={{width: 45, height: 45}}
  21. />
  22. <Text style={{textAlign: "center", fontSize: 10, weight: "bold", color: "#aaaa00", width: 45}}> {name} {index} {index2} </Text>
  23. </View>
  24. })}
  25. </View>
  26. );
  27. })}
  28. </View>
  29. );
  30. }
  31. });

Multi function render

上面的範例中,render function 的程式碼很長,因為每個 Forloop 程式都塞到同一個 function 裡,這樣降低了程式的可讀性,所以我再把一個 render function ,切出兩個 renderList 與 renderPerson function。

實作程式碼如下:

Multi function render
  1. /** Render **/
  2. render: function() {
  3. var self = this;
  4. var img = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p50x50/10390028_10102210419817761_5871103530921178170_n.jpg?oh=2250e4b8512bcdb3cd20675cd0fc7c76&oe=569E6D23&__gda__=1453290568_8a1813e8716960d2912d543217bbf197";
  5. var list = [];
  6. list.push([{},{},{},{},{}]);
  7. list.push([{},{},{},{},{}]);
  8. var name = "Mark Zuckerberg";
  9. return (
  10. <View style={{marginTop: 80, flex: 0}}>
  11. {list.map(function (l, index) {
  12. return self.renderList(l, img, name, index);
  13. })}
  14. </View>
  15. );
  16. },
  17. renderList: function (l, img, name, index) {
  18. var self = this;
  19. return (
  20. <View style={{flex: 1, height: 70, justifyContent: 'space-around', flexDirection: 'row', flexWrap: "wrap", marginBottom: 20}}>
  21. {l.map(function (val, index2) {
  22. return self.renderPerson(img, name, index, index2);
  23. })}
  24. </View>
  25. );
  26. },
  27. renderPerson: function (img, name, index, index2) {
  28. if (name.length > 4) {
  29. name = name.substr(0, 4);
  30. }
  31. return <View style={{textAlign: "center", borderWidth: 2, borderColor: "#066", borderStyle: "solid"}}>
  32. <Image
  33. source={{uri: img}}
  34. style={{width: 45, height: 45}}
  35. />
  36. <Text style={{textAlign: "center", fontSize: 10, weight: "bold", color: "#aaaa00", width: 45}}> {name} {index} {index2} </Text>
  37. </View>
  38. }

回應 (Leave a comment)