如何在反应中处理换行符<br>

Posted 2023-02-22

【中文标题】如何在反应中处理换行符<br>

【英文标题】：how to handle linebreak <br> in react [duplicate]

【发布时间】：2019-09-15 17:30:35

【问题描述】：

我正在设置一个应用程序，在 GUI 端，我想以不同的行而不是单行显示文本注释。 目前它的工作原理如下： 1. 从后端接收 json 文件，其中包含 key:value 对进行注释。 示例-> 评论：“服务的应用程序实体标题。发送系统必须使用完全相同的名称向服务发送数据。

在 GUI 端，在解析 JSON 文件后，GUI 尝试显示注释。

问题：GUI 无法识别 html 标记 并且不显示换行符。

问题：我是否需要在后端（在 C# 中）以不同的方式处理它？

从后端收到的json：

Comment: "Application Entity Title for Service.<br/> The sending system must use exactly the same name to send data to service. <br/>"

GUI反应代码

<div className="Setting__Comment">
  <p>
    <strong>Description:&nbsp;</strong>
     node.Comment
  </p>
</div>

GUI 端的当前结果

Description: Application Entity Title for Service.<br/> The sending system must use exactly the same name to send data to service. <br/>

预期结果。

Description: Application Entity Title for Service. 
             The sending system must use exactly the same name to send data to 
             service.

对我有用的解决方案：

  displayComment()
    var node = this.props.treeNode;
    return __html: node.Comment;

            <div className="SettingsTreeValueNode__Comment">
              <p>
                <strong>Description:&nbsp;</strong>
                <div dangerouslySetInnerHTML=this.displayComment()/>
              </p>
            </div>
          </div>

【问题讨论】：

从你得到这个<br/>的地方意味着它是来自node.Comment还是来自其他地方？

是的，我从 node.Comment 得到它。需要明确的是，getrequest 从客户端发送到服务器，作为服务器的响应，客户端获取 json 对象。客户端通过这个json对象，得到“评论”的信息。

那么你需要设置dangerouslySetInnerHTML属性。请点击此链接reactjs.org/docs/dom-elements.html

谢谢大家。

【参考方案1】：

您最好将文本分解为可渲染的块。如果您的消息中有 <br>，则应将其作为 html 令牌而不是文本单独处理。 所以，我建议从您的服务中返回一个数组，对于 br 令牌，只需显式渲染一个 br。

或者，您可以使用dangerouslySetInnerHTML 按原样呈现内容，但这不是标准方式，应尽可能避免。

dangerouslySetInnerHTML 只需参考这里的反应文档： https://reactjs.org/docs/dom-elements.html

【讨论】：

我现在试一试

【参考方案2】：

试试这个方法

<div className="Setting__Comment">
     <p>
       <strong>Description:&nbsp;</strong>
       <div dangerouslySetInnerHTML=__html : node.Comment />
     </p>
    </div>

【参考方案3】：

你可以使用

    <div className="Setting__Comment">
     <p>
       <strong>Description:&nbsp;</strong>
       <div dangerouslySetInnerHTML=__html: node.Comment />
     </p>
    </div>

【讨论】：

你确定这会奏效吗？

我试过这个方法，没用，ERROR: Uncaught Invariant Violation: props.dangerouslySetInnerHTML must be in the form __html: ....

displayComment() var node = this.props.treeNode;返回 __html: node.Comment;

是的 应该是 。详情请参考reactjs.org/docs/dom-elements.html。

【参考方案4】：

首先，split('<br/>')<br/> 的字符串并转换为Array。 然后，在 React 组件中，迭代或使用索引来显示数组值：-

class App extends React.Component
 render()
 var Comment = "Application Entity Title for Service.<br/> The sending system must use exactly the same    name to send data to service. <br/>";
  var array = Comment.split('<br/>');
  // console.log(array);
  return(
    <div>
    <div className="Setting__Comment">
         <p>
           <strong>Description:&nbsp;</strong>
            array.map(comment => <React.Fragment>comment<br/></React.Fragment>)
            
         </p>    
     </div>
    </div>  )
 


ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

【讨论】：

如果我不知道有多少来了怎么办？

这是您处理过的的唯一案例。如果在字符串中你得到