質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

Reactアプリで改行コード("\n")を含んだ文字列を、改行込みで表示したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,181

n_yoko

score 32

やりたいこと

ReactとReduxで九九計算プログラムを作っています。
テキストの入力フォームを2つ用意。テキストボックス1を横軸(x)、2を縦軸(y)とし、例えば、x=5、y=4と入力されたら下記の計算結果をブラウザに表示するようなプログラムです。

【理想】

例:x=5、y=4

出力結果:
1 2 3 4 5      //1の段
2 4 6 8 10   //2の段
3 6 9 12 15   //3の段
4 8 12 16 20  //4の段

解決したいこと

正しい計算結果をブラウザに表示するところまではできましたが、計算結果の数値がブラウザ上にすべて横並びで表示されます(chrome開発ツールのターミナル画面ではちゃんと改行表示される)。'\n''<br/>'ともに同じでした。これを適切な場所で改行されるように変更したいです。

【今の状況】

例:x=5、y=4

出力結果:
1 2 3 4 5 2 4 6 8 10 3 6 9 12 15 4 8 12 16 20

```

実際の画面

イメージ説明

ソースコード

index.js

import {createStore} from 'redux'  
import {Provider} from 'react-redux'  
import Counter from '../components/Counter'  
import {Keisan} from '../components/Counter'  

export let reducer = (state = {num1:0,num2:0,result:0,draw:""}, action) => {  
switch(action.type){  
case 'NUM1':  
return {  
...state,  
num1: action.payload  
}  
case 'NUM2':  
return {  
...state,  
num2: action.payload  
}  
case 'ONSUBMIT':  
return {  
...state,  
result: state.num1 * state.num2  
}  
case 'KEISAN':  
return {  
...state,  
draw: Keisan(state.num1,state.num2)  
}  
default:  
return state  
}  
}  

const store = createStore(reducer)  

export default () => (  
<Provider store={store}>  
<Counter/>  
</Provider>  
)  

Counter.js

// やりたいこと  
/*Reactアプリで改行コードを含んだ文字列を、改行込みで表示したい  
*/  

//Reactで改行データを表示する方法  
/*  
1. スタイルを当てる  
"const styles = { whiteSpace: 'pre-line'}; "  
"<div style={styles}></div>"  
2. split  
"var lines = this.props.text.split('\n').map(function(line)"  
3.  

*/  

import React from 'react'  
import { connect } from 'react-redux';  

export function Keisan(width,height) {  
let string1 = ""  
let string2 = ""  
for(let x=1; x <= height; x++){  
for(let y=1; y <= width; y++){  
string1 = string1 + String(x * y) + ' '  
}  
string2 = string2 + string1 + '\n'  
string1 = ""  
}  
console.log("number2:","\n",string2);  
return string2  
}  

export let Counter = ({numinput1,numinput2,result,onsubmit,num1,num2,keisan,draw}) => {  
return (  
<div>  
<h2>Counter</h2>  
<div>  
<label>num1:  
<input id="num1" type="text" onChange={numinput1} value={num1}></input><br></br>  
</label>  
<label>num2:  
<input id="num2" type="text" onChange={numinput2} value={num2}></input><br></br>  
</label>  
<button onClick={onsubmit}>計算</button>  
<button onClick={keisan}>描画</button>  
<div>  
<span>計算結果:</span>  
<div>{result}</div>  
<span>描画結果:</span>  
<div>{draw}</div>  
</div>  
</div>  
</div>  
)  
}  

const mapStateToProps = (state) => {  
return {  
num1: state.num1,  
num2: state.num2,  
result: state.result,  
draw: state.draw  
};  
}  

// recuderのactionに値を渡す  
const mapDispatchToProps = (dispatch) => ({  
keisan:() => dispatch({type:'KEISAN',payload:event.target.value}),  
onsubmit:() => dispatch({type:'ONSUBMIT'}),  
numinput1:(event) => dispatch({type:'NUM1',payload:event.target.value}),  
numinput2:(event) => dispatch({type:'NUM2',payload:event.target.value})  
})  

export default connect(  
mapStateToProps,  
mapDispatchToProps  
)(Counter)  
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

まず、前提知識として、ReactのJSX記法の{}の部分には配列を与えることができます。

1. <div>で囲むアプローチ

{}に入る値は[<div>...</div>, <div>...</div>, ...]です。

<span>描画結果:</span>
<div>{draw.split('\n').map(x => (<div>{x}</div>))}</div>

2. <br>を間にはさむアプローチ

{}に入る値は[text, <br />, text, <br />, ..., <br />, text]です。

<span>描画結果:</span>
<div>
  {draw
    .split("\n")
    .reduce((accum, x) => [...accum, x, <br />], [])
    .slice(0, -1)}
</div>

3. CSSのwhite-spaceで解決

質問者のコメントの"whiteSpace: 'pre-line;"も試してみました。

<span>描画結果:</span>
<div style={{ whiteSpace: "pre-line" }}>{draw}</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

丁寧なご回答ありがとうございます。
さきほど電車の中で試したところ、1,2,3すべてのやり方で動作確認が取れました!

これで、土日は別の課題に取り組めます。
夜分遅くにご対応頂きありがとうございましたm(_ _)m

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る