Posted at

Reactで改行を行う方法

Reactで改行を行う方法です。地味に詰まる人が多いと感じたので、メモ代わりに残します。


NewLine.js

const text = "1列目\n2列目\n\n\n\n\n\n\n\n4列目"

class NewLine extends React.Component {
render() {
return (
<div>
<p>{text}</p>
</div>
);
}
}

export default NewLine;


これの出力は以下になります。

image.png

ここでNewLine内のスタイルを下記のように少しいじってみます。


NewLine.js

<div style={{whiteSpace: 'pre-line'}}>

<p>{text}</p>
</div>

すると無事改行がされました。

image.png

公式の説明によると、デフォルトでは


normal

連続する空白文字はまとめられます。ソース内の改行文字も空白文字として扱われます。行ボックスを埋めるために、>必要なら行を折り返します。


となるからです。

段落を表現したい場合などは、上述の公式ドキュメント下部に実際に動かせる例があるので触ってみると面白いかと思います。

HTMLとCSSを触ったことがある人には常識なのかもしれませんが、意外と情報探すのに苦労したのでメモっときます。

ハマる人が出ないように願ってます。。。☆彡

参考: https://stackoverflow.com/questions/36260013/react-display-line-breaks-from-saved-textarea