回答編集履歴
8
テキスト修正
test
CHANGED
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
|
|
115
115
|
|
|
116
116
|
|
|
117
|
-
class PhotoText extends React.Component{
|
|
117
|
+
class PhotoText extends React.Component {
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
|
|
143
143
|
<img src={url} width="128"/>
|
|
144
144
|
|
|
145
|
-
<span>
|
|
145
|
+
<span>{label}</span>
|
|
146
146
|
|
|
147
147
|
</div>
|
|
148
148
|
|
7
テキスト修正
test
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
```javascript
|
|
24
24
|
|
|
25
|
-
<script src="http
|
|
25
|
+
<script src="http://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
|
26
26
|
|
|
27
27
|
```
|
|
28
28
|
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<script src="http://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
|
|
104
104
|
|
|
105
|
-
<script src="http
|
|
105
|
+
<script src="http://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
|
106
106
|
|
|
107
107
|
</head>
|
|
108
108
|
|
6
テキスト修正
test
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
|
|
86
86
|
|
|
87
|
-
ご質問に挙げられているHTMLを、上記の３点(1)(2)(3)について修正
|
|
87
|
+
ご質問に挙げられているHTMLを、上記の３点(1)(2)(3)について修正し、適宜、空行を入れたものが以下です。
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
|
|
@@ -111,6 +111,8 @@
|
|
|
111
111
|
<div id="root"></div>
|
|
112
112
|
|
|
113
113
|
<script type="text/babel">
|
|
114
|
+
|
|
115
|
+
|
|
114
116
|
|
|
115
117
|
class PhotoText extends React.Component{
|
|
116
118
|
|
|
@@ -160,7 +162,11 @@
|
|
|
160
162
|
|
|
161
163
|
</div>
|
|
162
164
|
|
|
165
|
+
|
|
166
|
+
|
|
163
167
|
ReactDOM.render(dom, document.getElementById('root'))
|
|
168
|
+
|
|
169
|
+
|
|
164
170
|
|
|
165
171
|
</script>
|
|
166
172
|
|
5
テキスト修正
test
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
|
|
57
|
-
### (3) render()
|
|
57
|
+
### (3) render() 内での画像URL取得部分
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
###
|
|
83
|
+
### 修正後のHTML
|
|
84
84
|
|
|
85
85
|
|
|
86
86
|
|
|
@@ -101,8 +101,6 @@
|
|
|
101
101
|
<script src="http://unpkg.com/react@15/dist/react.min.js"></script>
|
|
102
102
|
|
|
103
103
|
<script src="http://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
|
|
104
|
-
|
|
105
|
-
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>-->
|
|
106
104
|
|
|
107
105
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
|
108
106
|
|
4
テキスト修正
test
CHANGED
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
|
|
177
177
|
|
|
178
178
|
|
|
179
|
-
確認のため、上記をコピペしたHTMLを作成して、FireFox 62.0 で表示したところ、以下の
|
|
179
|
+
確認のため、上記をコピペしたHTMLを作成して、FireFox 62.0 で表示したところ、以下のキャプチャ画像
|
|
180
180
|
|
|
181
181
|
|
|
182
182
|
|
|
@@ -184,4 +184,10 @@
|
|
|
184
184
|
|
|
185
185
|
|
|
186
186
|
|
|
187
|
+
のようになり、各 `<img />` の src属性に `<PhotoText />` の props `image` から渡した文字列が反映されていたので、`<PhotoText />` が意図通り render されたのではないかと思います。
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
187
193
|
参考になれば幸いです。
|
3
テキスト修正
test
CHANGED
|
@@ -80,11 +80,11 @@
|
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
### 動作確認用のHTML
|
|
84
84
|
|
|
85
85
|
|
|
86
86
|
|
|
87
|
-
上記の３点
|
|
87
|
+
ご質問に挙げられているHTMLを、上記の３点(1)(2)(3)について修正すると、以下になります。
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
|
2
テキスト修正
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
### (1) 読み込
|
|
9
|
+
### (1) 読み込み対象の babel
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
1
テキスト修正
test
CHANGED
|
@@ -176,4 +176,12 @@
|
|
|
176
176
|
|
|
177
177
|
|
|
178
178
|
|
|
179
|
+
確認のため、上記をコピペしたHTMLを作成して、FireFox 62.0 で表示したところ、以下のようになりましたので、PhotoText が意図通り render されたのではないかと思います。
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
179
187
|
参考になれば幸いです。
|