Reactjs визуализации JSX с динамическим значением текста

Question

Я использую ReactJS и у меня есть следующая проблема, которую я не могу найти решение:

В точке непосредственно перед оказывать Я хотел бы заменить пространство между два слова с чем-либо, что заставит разрыв строки. Пока все, что я пробовал, не работает. Я прочитал документацию React, которая может быть с предложением, я имею дело с «JSX Gotchas»

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> 

В настоящее время, что оказанной экран включает в себя текст, скажем, Big <br/> Bid.

Если есть какие-либо специалисты ReactJS, которые могли бы показать мне лучший способ справиться с этой проблемой, я был бы очень благодарен.

Большое спасибо заранее.

Answer 1

There пару способов, как вы можете решить эту проблему

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, или отключение спасаясь т.д.

Я бы просто разделить строку в соответствии в пробелы, а затем, постройте список элементов из него.