Question

我有以下React代码：

render() {
  const str = 'Line 1. **new-line** Line 2.';
  return (
    <p> {str} </p>
  );
}

我希望输出为：

Line 1.
Line 2.

那就是 - 在单词之间添加一个新行。我尝试了\n，但它不起作用。

如何实现这一目标？

编辑：从服务器收到字符串。

Answer 1

为此，您必须使用名为dangerouslySetInnerHTML的内容。

示例

render() { const str = 'Line 1. Line 2.'; return ( ); }

Answer 2

更传统的方法是使用您的字符串创建一个数组，其间包含 标记。从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获取字符串，则可以通过查找所有 子字符串来创建此类数组，并将其替换为实际的JSX  。以下代码将使用您的字符串并在 的每个实例上执行字符串拆分。这将为您提供['Line 1. ', '', 'Line 2.']。如您所见，数组中的每个奇数元素都是我们想要推送JSX  的地方。我们可以在一个循环中完成这个。

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>

Answer 3

为段落设置CSS样式，如下所示，它将在\ n上换行并根据父级宽度换行。

white-space: pre-wrap;

Answer 4

style={{ whiteSpace: 'break-spaces' }}

Answer 5

这就是我所做的。

<span>{<br/>}</span>

Answer 6

您可以通过使用CSS来实现此目的。

p {
    white-space: pre;
}

然后你渲染成为：

const str = "Line 1.\nLine 2."
return (<p>{str}</p>)

Answer 7

使用 CSS -（只需将其添加到内容的 div。为每个附加到内容的 '\n' 换行并添加换行符）

p {
    white-space: pre-wrap;
}

使用 React 的 risklySetInnerHTML -（应用于父 div 并解析 value 字段中的任何标签。工作方式类似于 innerHTML。）

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

有关危险设置内部HTML的更多信息的链接：
[https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml][1]

在段落内的JSX字符串中添加新行 - React

7 个答案: