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

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

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

И вот соответствующий html:

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

Но в браузере это выглядит так:

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

Ответ 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/hacks с данными, вы можете использовать dangerouslySetInnerHTML с" br 'для каждой строки:

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, но за счет потенциально опасной безопасности веб-страницы/пользователя. Я бы не использовал этот, если другие работают на вас.

Ответ 2

Попробуйте 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>

Ответ 3

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

Ответ 4

попробуйте использовать элемент <pre> или свойство css white-space: pre-wrap;

Ответ 5

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