如何在 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(' ') and 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

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

How to break line in JSX from javascript string

javascript

reactjs

jsx