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

Posted 2023-02-22

【中文标题】在段落内的 JSX 字符串中添加新行 - React

【英文标题】：Adding a new line in a JSX string inside a paragraph - React

【发布时间】：2018-10-18 04:19:07

【问题描述】：

我有以下 React 代码：

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

我希望输出是：

Line 1.
Line 2.

即 - 在单词之间添加一个新行。 我试过\n，但它不起作用。

如何做到这一点？

编辑： 字符串是从服务器接收的。

【问题讨论】：

你尝试过字符串文字吗？ developer.mozilla.org/en-US/docs/Web/javascript/Reference/… 和空格：pre

我简化了问题，但实际上我从服务器接收字符串..所以字符串文字没有帮助。

然后你必须修改字符串并在两者之间放置一个中断并将其用作html。就像这位先生回答的那样。

@DM，检查我更新的答案，尤其是第二个代码 sn-p。我认为它可以解决您的问题。

【参考方案1】：

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

white-space: pre-wrap;

或

white-space: pre-line;

【讨论】：

您介意解释一下它们的作用和不同之处吗？

【参考方案2】：

一种更传统的方法是使用您的字符串创建一个数组，并在其间添加一个<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>

【参考方案3】：

为此，您必须使用名为 dangerouslySetInnerHTML 的东西。

示例

render() 
  const str = 'Line 1. <br /> Line 2.';
  return (
    <p dangerouslySetInnerHTML= __html: str />
  );

【讨论】：

这看起来很危险......不是有某种ASCII码可以输出换行符吗？

这并不危险。他们只是在告诉您cross site scripting 攻击的可能性。但你实际上可以阻止它。通过服务器响应中的normalizing the HTML 内容或在呈现内容之前。

【参考方案4】：

style= whiteSpace: 'break-spaces' 

【参考方案5】：

您可以改用 CSS 来完成此操作。

p 
    white-space: pre;
 

你渲染然后变成：

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

【参考方案6】：

这就是我的工作。

<span><br/></span>

【参考方案7】：

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

p 
    white-space: pre-wrap;
 

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

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

链接以获取有关 dangerouslySetInnerHTML 的更多信息： [https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml][1]