newlines character ignored by jsx table

问题

I am trying to create a table with a multiline string, but the string is not formatted correctly by my table. Here is the jsx:

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

And here is the corresponding html:

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

But in the browser it looks like:

What's going on and how do I get my newlines to appear?

回答1:

You've got a few options:

1) Use a block level element such as div or a p and wrap each line.

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) Use a span with a br element:

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) If you're certain there is no threat of XSS/hacks with the data, you could use dangerouslySetInnerHTML with a 'br' for each line:

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'));

The last one produces the least amount of HTML, but at a cost of potentially risky the security of the web page/user. I wouldn't use this one if the others work for you.

回答2:

Try white-space: pre; or white-space: pre-wrap; (Thanks, @Mirage) in the style of your cell.

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:

When you really need this, use {'\n'} inside your JSX.

回答4:

try to use the <pre> element or the css property white-space: pre-wrap;

回答5:

This is an HTML thing where newlines are the same thing as spaces. To force newlines use <br/> tags like {arr.join('<br/>')}.

回答6:

Here is the idea of how you can replace "\n" by rendering single "br" element in JSX after each new word.

{['orange', 'apple', 'limon']
  .reduce((acc, w) => acc.concat(acc.length % 2 !== 0 ? w : [w, '\n']), [])
  .map(w => w === '\n' ? <br/> : w)}  // => [orange, <br/>, apple, <br/>, ...]

To save simplicity I won't add a key to each element and doesn't remove the last . But it's easy to do by yourself if it's needed.

来源：https://stackoverflow.com/questions/29401711/newlines-character-ignored-by-jsx-table

标签

javascript

reactjs

react-jsx