React.jsで改行が表示されなくて困ったメモ

問題

textarea -> divの中身にする

みたいなありがちなやつで、これが

こうなる

改行\nして\nください

ってなってる

調査

みんな困ってたっぽい

• https://groups.google.com/forum/#!topic/reactjs/VUJT314Gm50
• （textarea内部のはなしだけど↓）
  • http://niwaript.niwaringo.com/entry/2015/04/07/005053
  • javascript - multiline textarea in reactjs - Stack Overflow
  • 参考） React.jsでFormを扱う - Qiita

解決

今回はこうした

var Message = React.createClass({
    render: function() {
        var lines = this.props.text.split('\n').map(function(line) {
            return <p className="line-wrap">{line}</p>;
        });
        return <div>{lines}</div>;
    }
});

p.line-wrap {
    margin: 0;
}

蛇足だけど、ComponentのrenderメソッドはひとつのReactComponentしか返せないからMessageは<div></div>で囲ってあげる必要がある。

雑感

React良い感じだ。クソなHTML組んで滅茶苦茶なjQuery書くのより明らかに平和だ。

DRY

JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書