символ новой строки игнорируется jsx table

Question

Я пытаюсь создать таблицу с многострочной строкой, но строка не корректно отформатирована моей таблицей. Вот JSX:

<td> 
    {arr.join('\n')} 
</td> 

А вот соответствующий HTML:

<td data-reactid=".xyz">Line 1 
Line 2 
Line 3 
Line 4</td> 

Но в браузере это выглядит следующим образом:

Что происходит и как я получить мои новые строки?

Answer 1

У вас есть несколько вариантов:

1) Использование элемента уровня блока, таких как div или p и обернуть каждую строку.

var TextLines = React.createClass({  
    render: function() { 
     var lines = this.props.lines; 

     var formatted = lines.map(function(line) { 
      return (<p>{line}</p>); 
     }); 
     return (<div>{ formatted }</div>); 
    } 
}); 

var lines = ['line 1', 'line 2', 'line 3']; 
React.render(<TextLines lines={ lines }/>, 
       document.getElementById('container')); 

2) Используйте промежуток с br элемента:

var TextLines = React.createClass({  
    render: function() { 
     var lines = this.props.lines; 

     var br = lines.map(function(line) { 
      return (<span>{line}<br/></span>); 
     }); 
     return (<div>{ br }</div>); 
    } 
}); 

var lines = ['line 1', 'line 2', 'line 3']; 
React.render(<TextLines lines={ lines } />, 
       document.getElementById('container')); 

3) Если вы уверены, что нет никакой угрозы XSS/хаки с данными, вы можете использовать dangerouslySetInnerHTML с ' ш»для каждой строки:

var TextLines = React.createClass({  
    render: function() { 
     var lines = this.props.lines; 
     var content = { 
      __html: lines.join('<br />') 
     };  
     return (<div dangerouslySetInnerHTML={ content } />); 
    } 
}); 

var lines = ['line 1', 'line 2', 'line 3']; 
React.render(<TextLines lines={ lines } />, 
      document.getElementById('container')); 

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

Answer 2

Это HTML-код, где символы новой строки - это то же самое, что и пространства. Чтобы использовать символы новой строки, используйте <br/> теги наподобие {arr.join('<br/>')}.

Answer 3

Если вам это действительно нужно, используйте {'\n'} внутри вашего JSX.

Answer 4

Попробуйте white-space: pre; или white-space: pre-wrap; (Спасибо, @Mirage) в стиле вашей камеры.

td { 
 
    width: 150px; 
 
} 
 

 
.nopre { 
 
    background-color: lightblue; 
 
} 
 

 
.withpre { 
 
    background-color: lightgreen; 
 
    white-space: pre; 
 
} 
 

 
.withprewrap { 
 
    background-color: orange; 
 
    white-space: pre-wrap; 
 
}

<table><tr> 
 

 
<td class="nopre">Line A 
 
Line B 
 
Line C 
 
This is a cell with no whitespace setting</td> 
 

 
</tr></table><table><tr> 
 

 
<td class="withpre">Line 1 
 
Line 2 
 
Line 3 
 
This is a cell with white-space: pre</td> 
 

 
</tr></table><table><tr> 
 
    
 
<td class="withprewrap">Line 1 
 
Line 2 
 
Line 3 
 
This is a cell with white-space: pre-wrap</td> 
 
    
 
</tr></table>

Answer 5

пытаются использовать <pre> элемент или свойство CSS white-space: pre-wrap;