新しい行に配列内の各項目を表示します

networkcore：

私はこのようなことは、ルックスの配列を持っています：

let array = ["Item 1", "Item 2", "Item 3"]

私が参加使って新しい行にこれらの項目のすべてを表示するために、すべての必要があります

let joinedArray = array.join("\n")

私はそれが正しい探している本を記録した場合は、しかし、私はどこの問題の嘘DOMにしていること、それをレンダリングする必要があります。どのように私はDOMに改行で区切ってこれらの各項目をレンダリングすることができますか？

return <MyComponent
      { array.length !== 0 &&
        <div>
            {joinedArray}
        </div>
      }
</MyComponent>;

palaѕn：

あなたは、単に新しいクラスの発言を追加することによって、これを達成することができaddlinebreakてwhite-space: pre-line、スタイル：

let array = ["Item 1", "Item 2", "Item 3"]
let joinedArray = array.join("\n")

class App extends React.Component {
  render() {
    return <div className="addlinebreak">{joinedArray}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.addlinebreak {
  white-space: pre-line;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>