Question

我正在设置一个应用程序，并且在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>

Answer 1

您最好将文本分成可渲染的块。如果您的邮件中包含<br>，则应将其作为html令牌而不是文本进行单独处理。因此，我建议您从服务中返回一个数组，对于br令牌，只需显式呈现br。

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

dangerouslySetInnerHTML

只需在此处参考react文档： https://reactjs.org/docs/dom-elements.html

Answer 2

您可以使用

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

Answer 3

尝试这种方式

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

Answer 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' />

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

4 个答案: