[解決済み] Reactで複数行のテキストをレンダリングする方法

質問

改行を含む文字列があり、それを以下のようにレンダリングするとします。

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

HTMLでは、改行が改行としてレンダリングされません。Reactではどうすればいいのでしょうか？私は変換したくありません <br> タグを使用し dangerouslySetInnerHTML . 他の方法はないのでしょうか？

どのように解決するのですか？

各行にdivを配置してみる

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

または

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}