我有以下react代码：
render() {
const str = 'Line 1. **new-line** Line 2.';
return (
<p> {str} </p>
);
}
我希望输出是：
Line 1.
Line 2.
那就是 - 在单词之间添加一个新行。我试过了，\n但它不起作用。
这怎么可能实现？
编辑：字符串是从服务器接收的。
在段落内的 JSX 字符串中添加新行 - React
IT技术
javascript
html
css
reactjs
2021-04-02 14:30:06
6个回答
如下为段落设置 CSS-Style，它将在 \n 上换行并根据父宽度换行。
white-space: pre-wrap;
或者
white-space: pre-line;
更传统的方法是只用字符串创建一个数组，中间有一个<br />标签。从 React v16 开始，数组是元素的有效返回值。
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' }}
为此，您必须使用称为dangerouslySetInnerHTML.
例子
render() {
const str = 'Line 1. <br /> Line 2.';
return (
<p dangerouslySetInnerHTML={{ __html: str }}/>
);
}
您可以通过使用 CSS 来实现这一点。
p {
white-space: pre;
}
你渲染然后变成：
const str = "Line 1.\nLine 2."
return (<p>{str}</p>)
其它你可能感兴趣的问题