如何在反应中处理换行符 答案

【问题标题】：how to handle linebreak 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>

【问题讨论】：

从你得到这个 的地方意味着它是来自node.Comment还是来自其他地方？
是的，我从 node.Comment 得到它。需要明确的是，getrequest 从客户端发送到服务器，作为服务器的响应，客户端获取 json 对象。客户端通过这个json对象，得到“评论”的信息。
那么你需要设置dangerouslySetInnerHTML属性。请点击此链接reactjs.org/docs/dom-elements.html
谢谢大家。
描述：

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

标签： json reactjs html

【解决方案1】：

您最好将文本分解为可渲染的块。如果您的消息中有  ，则应将其作为 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(' ')  的字符串并转换为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' />

【讨论】：

如果我不知道有多少
来了怎么办？
这是您处理过的
的唯一案例。如果在字符串中你得到
或任何其他 html 元素怎么办。请尝试提出通用解决方案。

或任何其他 html 元素怎么办。请尝试提出通用解决方案。