読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

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

問題

textarea -> divの中身にする

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

f:id:otiai10:20150629001328p:plain

こうなる

f:id:otiai10:20150629001341p:plain

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

ってなってる

調査

みんな困ってたっぽい

解決

今回はこうした

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