Afficher chaque élément dans le tableau sur une nouvelle ligne

networkcore:

J'ai un tableau qui ressemble à ceci:

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

Je dois tout afficher tous ces éléments sur une nouvelle ligne donc j'utilise rejoindre

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

Si je me connecte cela, il est à la recherche correcte, mais je dois le rendre au DOM et c'est là que des mensonges de question. Comment puis-je rendre chacun de ces éléments séparés avec une nouvelle ligne au DOM?

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

palaѕn:

Vous pouvez y parvenir en ajoutant simplement un nouveau mot de classe addlinebreakavec white-space: pre-linestyle:

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>