teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

messageBoxコンポーネントにclassNameを追加

2016/08/08 02:29

投稿

ricy
ricy

スコア48

title CHANGED
File without changes
body CHANGED
@@ -63,7 +63,9 @@
63
63
 
64
64
  render: function() {
65
65
  return (
66
+ <div className="messageBox">
66
- <MessageList data={this.state.data} onScroll={this.onScroll} />
67
+ <MessageList data={this.state.data} />
68
+ </div>
67
69
  );
68
70
  }
69
71
  });

2

`のつけ忘れ修正

2016/08/08 02:28

投稿

ricy
ricy

スコア48

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,7 @@
8
8
  特定の処理を実装したいのですが、
9
9
  どのコンポーネントに処理を書けばよいでしょうか
10
10
 
11
+ ````
11
12
  <html>
12
13
  <head>
13
14
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
@@ -73,4 +74,5 @@
73
74
  );
74
75
  </script>
75
76
  </body>
76
- </html>
77
+ </html>
78
+ ````

1

コードを追記

2016/08/08 01:52

投稿

ricy
ricy

スコア48

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,76 @@
1
- 1,リスト操作する一番上位のコンポーネント
1
+ 1,リスト操作する一番上位のコンポーネント MessageBox
2
- 2.リスト全体のコンポーネント
2
+ 2.リスト全体のコンポーネント MessageList
3
- 3.リスト1行のコンポーネント
3
+ 3.リスト1行のコンポーネント Message
4
4
  3をループして描画
5
5
  といった設計で描画しているのですが、
6
6
 
7
7
  リスト1行のコンポーネントの一番最後まで描画し終わったあとに
8
8
  特定の処理を実装したいのですが、
9
- どのコンポーネントに処理を書けばよいでしょうか
9
+ どのコンポーネントに処理を書けばよいでしょうか
10
+
11
+ <html>
12
+ <head>
13
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
14
+ <script src="https://fb.me/react-0.13.3.js"></script>
15
+ <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
16
+ </head>
17
+ <body>
18
+ <div id="content">
19
+ </div>
20
+ <script type="text/jsx">
21
+
22
+
23
+
24
+ var Message = React.createClass({
25
+ render: function() {
26
+ return (
27
+ <li>
28
+ <div className="message">
29
+ <img src={this.props.data.message} alt=""></img>
30
+ </div>
31
+ </li>
32
+ );
33
+ }
34
+ });
35
+
36
+ var MessageList = React.createClass({
37
+ render: function() {
38
+ var resultNodes = this.props.data.map(function (row) {
39
+ return (
40
+ <Message data={row} />
41
+ );
42
+ });
43
+ return (
44
+ <ul>
45
+ {resultNodes}
46
+ </ul>
47
+ );
48
+ }
49
+ });
50
+
51
+ var MessageBox = React.createClass({
52
+ // 初期値を設定します
53
+
54
+ getInitialState: function() {
55
+ return {data: [], page: 1, apiUrl: 'http://api.com/get'};
56
+ },
57
+
58
+ componentDidMount: function() {
59
+ // ajaxでデータを取得
60
+ this.requestData();
61
+ },
62
+
63
+ render: function() {
64
+ return (
65
+ <MessageList data={this.state.data} onScroll={this.onScroll} />
66
+ );
67
+ }
68
+ });
69
+
70
+ React.render(
71
+ <MessageBox />,
72
+ document.getElementById('content')
73
+ );
74
+ </script>
75
+ </body>
76
+ </html>