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)