JSX中的断线[重复]

Question

我将应用程序中的每个文本都存储在settings.ts文件中，但我需要添加一些隔断线，但\n这似乎不起作用。有没有其他方法可以让我看到这些隔断线？我在做Next.js，React，TypeScript。

export const text = 'this is my text that \nshould have a breakline'

<div>{text}</div>

Answer 1

您可以设置空格以进行预包装

const text = 'this is my text that \nshould have a breakline'

const App = () => <div className="break">{text}</div>

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

.break {
  white-space: pre-wrap;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 2

您可以使用另一个选项来代替\n