質問編集履歴
1
添付動画の表示が一部おかしかったので差し替えました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
正しい計算結果をブラウザに表示するところまではできましたが、計算結果の数値がすべて横並びで表示されます。これを適切な場所で改行されるように変更したいです。
|
|
35
|
+
正しい計算結果をブラウザに表示するところまではできましたが、計算結果の数値がブラウザ上にすべて横並びで表示されます（chrome開発ツールのターミナル画面ではちゃんと改行表示される）。'\n''<br/>'ともに同じでした。これを適切な場所で改行されるように変更したいです。
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
# 実際の画面
|
|
56
56
|
|
|
57
|
-
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
@@ -158,39 +158,65 @@
|
|
|
158
158
|
|
|
159
159
|
|
|
160
160
|
|
|
161
|
+
// やりたいこと
|
|
162
|
+
|
|
163
|
+
/*Reactアプリで改行コードを含んだ文字列を、改行込みで表示したい
|
|
164
|
+
|
|
165
|
+
*/
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
//Reactで改行データを表示する方法
|
|
170
|
+
|
|
171
|
+
/*
|
|
172
|
+
|
|
173
|
+
1. スタイルを当てる
|
|
174
|
+
|
|
175
|
+
"const styles = { whiteSpace: 'pre-line'}; "
|
|
176
|
+
|
|
177
|
+
"<div style={styles}></div>"
|
|
178
|
+
|
|
179
|
+
2. split
|
|
180
|
+
|
|
181
|
+
"var lines = this.props.text.split('\n').map(function(line)"
|
|
182
|
+
|
|
183
|
+
3.
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
*/
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
161
191
|
import React from 'react'
|
|
162
192
|
|
|
163
193
|
import { connect } from 'react-redux';
|
|
164
194
|
|
|
165
195
|
|
|
166
196
|
|
|
167
|
-
export function Keisan(
|
|
197
|
+
export function Keisan(width,height) {
|
|
168
|
-
|
|
169
|
-
|
|
198
|
+
|
|
170
|
-
|
|
171
|
-
let height = num2 // num2 = 4
|
|
172
|
-
|
|
173
|
-
let n
|
|
199
|
+
let string1 = ""
|
|
174
|
-
|
|
200
|
+
|
|
175
|
-
let n
|
|
201
|
+
let string2 = ""
|
|
176
202
|
|
|
177
203
|
for(let x=1; x <= height; x++){
|
|
178
204
|
|
|
179
205
|
for(let y=1; y <= width; y++){
|
|
180
206
|
|
|
181
|
-
n
|
|
207
|
+
string1 = string1 + String(x * y) + ' '
|
|
182
208
|
|
|
183
209
|
}
|
|
184
210
|
|
|
185
|
-
n
|
|
211
|
+
string2 = string2 + string1 + '\n'
|
|
186
|
-
|
|
212
|
+
|
|
187
|
-
n
|
|
213
|
+
string1 = ""
|
|
188
214
|
|
|
189
215
|
}
|
|
190
216
|
|
|
191
|
-
console.log("number2:","\n",n
|
|
217
|
+
console.log("number2:","\n",string2);
|
|
192
|
-
|
|
218
|
+
|
|
193
|
-
return n
|
|
219
|
+
return string2
|
|
194
220
|
|
|
195
221
|
}
|
|
196
222
|
|
|
@@ -222,9 +248,17 @@
|
|
|
222
248
|
|
|
223
249
|
<button onClick={keisan}>描画</button>
|
|
224
250
|
|
|
251
|
+
<div>
|
|
252
|
+
|
|
253
|
+
<span>計算結果:</span>
|
|
254
|
+
|
|
225
|
-
<
|
|
255
|
+
<div>{result}</div>
|
|
226
|
-
|
|
256
|
+
|
|
227
|
-
<p>描画結果:<
|
|
257
|
+
<span>描画結果:</span>
|
|
258
|
+
|
|
259
|
+
<div>{draw}</div>
|
|
260
|
+
|
|
261
|
+
</div>
|
|
228
262
|
|
|
229
263
|
</div>
|
|
230
264
|
|
|
@@ -254,6 +288,8 @@
|
|
|
254
288
|
|
|
255
289
|
|
|
256
290
|
|
|
291
|
+
// recuderのactionに値を渡す
|
|
292
|
+
|
|
257
293
|
const mapDispatchToProps = (dispatch) => ({
|
|
258
294
|
|
|
259
295
|
keisan:() => dispatch({type:'KEISAN',payload:event.target.value}),
|