Reactjs渲染JSX動態文本值

Question

我使用ReactJS，我有以下問題，我無法找到一個解決方案：

在點來呈現我想更換之間的空間前夕兩個詞與任何將強制換行的任何內容。到目前爲止，我所嘗試的一切都不起作用我讀過這可能暗示我負責的一個「​​」

let strReturn = "\u000A";//<br/>//\u000D 

// for example this.props.label could have a value of "Big Bid" 

// now remove space between 'Big Bid' and replace with <br/> 
let str = this.props.label.replace(/ /, strReturn); 

return <div className={this.props.className}>{str}</div> 

目前什麼是渲染到屏幕包括文字說大<br/>的投標文件作出反應。

如果有任何ReactJS專業人士可以告訴我處理這個問題的最佳方式，我將非常感激。

非常感謝提前。

Answer 1

有幾種方法，你如何解決這個問題

1. 使用dangerouslySetInnerHTML

   let str = this.props.label.replace(/ /, '<br>'); 
   return <div dangerouslySetInnerHTML={ { __html: str} } />; 
   

   Example

2. 分割字符串，然後包裹每一行標記，例如<p>

   let text = this.props.label.split(/ /).map((text, index) => { 
       return <p key={ index }>{ text }</p> 
   }); 
   
   <div> 
       { text } 
   </div>; 
   

   Example

Answer 2

在這種情況下，其實我去的是明確的與你想要什麼來實現的，而不是依靠插入Unicode的招數，或者禁止逃逸等途徑

我會根據剛剛拆分字符串轉換爲空格，然後從中構建一個元素列表。