webentwicklung-frage-antwort-db.com.de

newlines-Zeichen, das von der jsx-Tabelle ignoriert wird

Ich versuche, eine Tabelle mit einer mehrzeiligen Zeichenfolge zu erstellen, aber die Zeichenfolge wird von meiner Tabelle nicht korrekt formatiert. Hier ist der Jsx:

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

Und hier ist das entsprechende HTML:

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

Im Browser sieht es jedoch so aus:

enter image description here

Was ist los und wie kann ich meine Newlines anzeigen lassen?

15
Eric Baldwin

Sie haben einige Möglichkeiten:

1) Verwenden Sie ein Block-Level-Element wie div oder p und umbrechen Sie jede Zeile.

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) Verwenden Sie einen Bereich mit einem 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) Wenn Sie sicher sind, dass XSS/Hacks keine Gefahr für die Daten darstellen, können Sie dangerouslySetInnerHTML mit einem 'br' für jede Zeile verwenden:

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

Der letzte Code erzeugt die geringste Menge an HTML, jedoch zu einem potenziellen Risiko für die Sicherheit der Webseite/des Benutzers. Ich würde dieses nicht verwenden, wenn die anderen für Sie arbeiten. 

17
WiredPrairie

Versuchen Sie white-space: pre; oder white-space: pre-wrap; (Danke, @Mirage) im Stil Ihrer Zelle.

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>

19
Chris

Wenn Sie dies wirklich benötigen, verwenden Sie {'\n'} in Ihrer JSX.

11

versuchen Sie, das <pre>-Element oder die css-Eigenschaft white-space: pre-wrap; zu verwenden.

3
klioen

Hier ist die Idee, wie Sie "\ n" ersetzen können, indem Sie nach jedem neuen Wort ein einzelnes "br" -Element in JSX rendern.

{['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/>, ...]

Der Einfachheit halber füge ich nicht jedem Element einen Schlüssel hinzu und entferne nicht den letzten. Aber es ist einfach, es selbst zu tun, wenn es gebraucht wird.

0
Purkhalo Alex

Dies ist eine HTML-Sache, bei der Zeilenumbrüche das gleiche wie Leerzeichen sind .. Um Zeilenumbrüche zu erzwingen, verwenden Sie <br/>-Tags wie {arr.join('<br/>')}.

0
flaviodesousa