我有以下 React 代码：
render() {
const str = 'Line 1. **new-line** Line 2.';
return (
<p> {str} </p>
);
}
我希望输出是：
Line 1.
Line 2.
也就是说 - 在单词之间添加新行。 我已经尝试过n但它不起作用。
如何做到这一点？
编辑：字符串是从服务器接收的。
为段落设置 CSS 样式，如下所示，它将在 上换行并根据父宽度换行。
white-space: pre-wrap;
或
white-space: pre-line;
更传统的方法是只创建一个包含字符串的数组，中间有一个<br />标签。从 React v16 开始，数组是 Elements 的有效返回值。
class App extends React.Component {
render() {
const arr = ['Line 1. ', <br />, 'Line 2.'];
return (
<p> {arr} </p>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>如果你从某个 API 获取一个字符串，你可以通过找到所有子字符串来创建这样一个数组<br />并将它们替换为实际的 JSX<br />。以下代码将获取您的字符串，并在<br />的每个实例上执行字符串拆分。这会给你['Line 1. ', '', 'Line 2.'].如您所见，数组中的每个奇数元素都是我们要推送 JSX<br />的位置。我们可以在一个循环中非常简单地做到这一点。
class App extends React.Component {
render() {
const str = 'Line 1. <br /> Line 2.';
const arr = str.split(/<br />/);
const resultArr = [];
arr.forEach((item, i) => {
if(i%2===0) resultArr.push(<br />);
resultArr.push(item);
});
return (
<p> {resultArr} </p>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>另一种方法是使用dangeourslySetInnerHTML()或使用模板文本。
您可以使用模板文字以及 css 规则white-space: pre来保留换行符。在下面查看我的演示：
class App extends React.Component {
render() {
const str = `Line 1.
Line 2.`;
return (
<p style={{whiteSpace: 'pre'}}> {str} </p>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>style={{ whiteSpace: 'break-spaces' }}
你可以改用CSS来实现这一点。
p {
white-space: pre;
}
然后，您渲染将变为：
const str = "Line 1.nLine 2."
return (<p>{str}</p>)
为此，您必须使用名为dangerouslySetInnerHTML的东西
。例
render() {
const str = 'Line 1. <br /> Line 2.';
return (
<p dangerouslySetInnerHTML={{ __html: str }}/>
);
}
使用 CSS - (只需将其添加到内容的div 中即可，为附加到内容的每个""换行并添加换行符(
p {
white-space: pre-wrap;
}
使用 React 的危险设置内部HTML - (适用于父div 并解析值字段中的任何标签。工作原理类似于 innerHTML。
<div dangerouslySetInnerHTML={{__html: '<p>First · Second</p>'}}></div>
有关dangerouslySetInnerHTML
：[https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml]的更多信息的链接[1]
这就是我所做的。
<span>{<br/>}</span>
您可以通过执行以下操作轻松实现它：
myTextHere={<span>Hello<br />Hi</span>}
输出将如下所示：
Hello
Hi
使用浏览器打开此 html 页面。
我的是铬 115.0.5790.98
#ExampalReactNewLines.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>ExampalReactNewLines</title>
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
function ExampalReactNewLines()
{
return (
<div>
{`
1 newline
2 newline
3 newline
7 newline
2 newline
15 newline
stop
`.split(/n{100}/).map((i,key) => {return <pre key={key}>{i}</pre>;})
}
</div>
)
}
///////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////
ReactDOM.render(<ExampalReactNewLines />, document.querySelector('#root'));
</script>
</body>
</html>