如何在JSX中从javascript字符串换行

Question

我有在JSX 中使用的字符串

const text = 'Hello World';

和JSX:

<p>{text}</p>

如何从World开始新行？

我想要结果：

Hello
World

Answer 1

为每行使用单独的HTML元素将是一种更好的方法，这需要一些css来确保垂直，这可能看起来像以下内容：

const Example = () => {

const text = 'Hello World';

return <p>{text.split(' ').map(t => <span>{t}</span>)}</p>;
}
ReactDOM.render(<Example />, document.getElementById("react"));

p {
display: flex;
flex-direction: column;
}

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="react"></div>

---

否则，我们可以使用split(' ')和reduce()在每个单词之间添加换行符(<br />(。

const Example = () => {

const text = 'Hello World';
const wrapped = text.split(' ')
.reduce((prev, cur) => [ ...prev, cur, <br /> ], [])

return <p>{wrapped}</p>;
}
ReactDOM.render(<Example />, document.getElementById("react"));

p {
white-space: pre-line;
}

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

<div>{text.split(' ').map( w => <p>{w}</p>)}</div