web-dev-qa-db-fra.com

caractère de nouvelle ligne ignoré par la table jsx

J'essaie de créer une table avec une chaîne multiligne, mais la chaîne n'est pas formatée correctement par ma table. Voici le jsx:

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

Et voici le code html correspondant:

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

Mais dans le navigateur, cela ressemble à:

enter image description here

Que se passe-t-il et comment puis-je faire apparaître mes nouvelles lignes?

javascriptreactjsreact-jsx
15
Eric Baldwin

Vous avez quelques options:

1) Utilisez un élément de niveau bloc tel que div ou p et entourez chaque ligne.

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) Utilisez une étendue avec un élément 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) Si vous êtes certain qu'il n'y a aucune menace de XSS/hacks avec les données, vous pouvez utiliser dangerouslySetInnerHTML avec un 'br' pour chaque ligne:

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

Le dernier produit le moins de HTML possible, mais à un coût potentiellement risqué pour la sécurité de la page Web/de l'utilisateur. Je n'utiliserais pas celui-ci si les autres travaillent pour vous. 

17
WiredPrairie

Essayez white-space: pre; ou white-space: pre-wrap; (Merci, @Mirage) dans le style de votre cellule.

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

Lorsque vous en avez vraiment besoin, utilisez {'\n'} dans votre JSX.

11
dontmentionthebackup

essayez d'utiliser l'élément <pre> ou la propriété css white-space: pre-wrap;

3
klioen

Ceci est une chose HTML où les nouvelles lignes sont identiques aux espaces . Pour forcer les nouvelles lignes, utilisez des balises <br/> comme {arr.join('<br/>')}.

0
flaviodesousa