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

Question

I have string that I use in JSX

const text = 'Hello World';

and JSX:

<p>{text}</p>

How to start new line from World ?

I want result:

Hello
World

Answer 1

Using separate HTML elements for each line would be a better approach, this requires some css to ensure there vertically, this could look something like the following:

 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>

---

Otherwise, we can use split(' ') and reduce() to add linebreaks ( <br /> ) between each word.

 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