caractère newlines ignoré par la table jsx

Je suis en train de créer une table avec une multiligne de la chaîne, mais la chaîne n'est pas correctement mis en forme 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, il ressemble:

caractère newlines ignoré par la table jsx

Ce qui se passe et comment puis-je obtenir mes nouvelles lignes apparaissent?

source d'informationauteur Eric Baldwin | 2015-04-01

  1. 17

    Vous avez un peu d'options:

    1) l'Utilisation d'un élément de niveau bloc comme div ou un p et envelopper 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) Utiliser un span avec un br élément:

    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 il n'y a pas de 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 génère le moins de quantité de HTML, mais à un coût du risque de la sécurité de la page web ou de l'utilisateur. Je ne voudrais pas utiliser ce un si les autres le travail pour vous.

  2. 10

    Quand vous avez vraiment besoin de cela, utilisez {'\n'} à l'intérieur de votre JSX.

  3. 3

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

  4. 0

    C'est un HTML chose où les retours à la ligne sont la même chose que des espaces.
    À force d'utiliser des retours à la ligne <br/> les balises comme {arr.join('<br/>')}.