Javascript 使用React获取html元素中字符串文本的换行符

我有个问题要解决。我看到了一些其他的问题，但他们没有和我一样的问题。这就是我目前正在努力做的

Text.js

export let exampleText = `This should be line 1
And this should be line 2
\n Maybe this will be line 2?
\\n or maybe this?`

app.jsx

var aboutItems = {
    headerClass: "aboutSection content",
    header: "About Me",
    subtitle: "Developer. Entrepreneur. Engineer.",
    text: Text.exampleText
}
class Site extends React.Component {
    render() {
        return (
            <div>
               <Section items = {aboutItems}/>
            </div>

        );
    }
}
class Section extends React.Component {
    render() {
        return (
            <div className = {this.props.items.headerClass}>
                <h1>{this.props.items.header}</h1>
                <h2>{this.props.items.subtitle}</h2>
                <p className="multi-line">{this.props.items.text}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <Site />,
    document.getElementById("root")
); 

我尝试在类multi-line中添加css样式，例如whitespace:pre，虽然这确实添加了multi-line，但它不会删除其他空格，因此使用样式（例如填充或边距）不再有效

这方面的工作是什么，或者更好的做法是什么

---

提前感谢。

您应该使用

white-space: pre-line;

结合或

\n

下面是一个使用字符串文字的运行示例：

const-App=（）=>(
{`这是第一行
这是2号线`
}
);
ReactDOM.render（，document.getElementById（'root'））
。换行符{
空白：行前；
}
由@Sagiv b.g提供的答案是正确的

空白：行前

这是钥匙

请找出你的例子

JSX:

你能举一个例子说明填充和边距停止工作的地方吗？我无法复制。
white-space: pre-line;

let exampleText = `This should be line 1
And this should be line 2
Maybe this will be line 3?
or maybe this?`;

var aboutItems = {
    headerClass: "aboutSection content",
    header: "About Me",
    subtitle: "Developer. Entrepreneur. Engineer.",
    text: exampleText
}
class Site extends React.Component {
    render() {
        return (
            <div>
               <Section items = {aboutItems}/>
            </div>

        );
    }
}
class Section extends React.Component {
    render() {
        return (
            <div className = {this.props.items.headerClass}>
                <h1>{this.props.items.header}</h1>
                <h2>{this.props.items.subtitle}</h2>
                <p className="multiline">{this.props.items.text}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <Site />,
    document.getElementById("root")
);

.multiline {
   white-space: pre-line;
}