Новая линия реагировать

Question

Я пытаюсь отправить следующий код компонента ребенка в React ЯШ:

{ 
    carPhoto: "../../images/small-logo.jpg", 
    make: "Mercedes", 
    price: "€20000", 
    desc: "Vivamus gravida magna massa in cursus mi" 
} 

Теперь я пытаюсь разделить DESC в две строки. Я попытался с \ п, \ г, \ г \ п

desc: "Vivamus gravida magna<br /> massa in cursus mi" 
desc: "Vivamus gravida magna\nmassa in cursus mi" 
desc: "Vivamus gravida magna\r\nmassa in cursus mi" 

Но ничего не получалось. Любой совет?

Answer 1

Вы можете использовать CSS, как это предлагается в комментариях. Или вы можете dangerously set inner HTML используя <br/> тег:

<div dangerouslySetInnerHTML={{__html: this.props.desc}} /> 

Важно отметить, что такой подход является XSS подверженным таким образом имя.

Вы можете прочитать здесь: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

Answer 2

<span> 
Example #1: <br /> newline 
</span> 
<span style={{ whiteSpace: 'pre-wrap' }}> 
{"Example #2: \r new line or \u000A new line"} 
</span> 
{/* do not forget add style { white-space: pre-wrap } */} 
<Example3 text={"Example #2: \r new line or \u000A new line"} />