Wie kann ich mit einem langen className in React JSX umgehen?

Question

Lassen Sie uns sagen, dass ich diese Komponente bin Rendering in JSX Reagieren:

render() { 
    return (
    <h1 className="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5">Some text</h1> 
); 
} 

Die Klassen meine JS-Linter als Linie auslösen, die zu lang ist, und es ist sehr schwer zu lesen. Wie kann ich eine lange className -Eigenschaft in einer React-Komponente in mehrere Zeilen trennen, ohne JSX-Syntax zu brechen oder einen anderen Fehler in einem JS-Linter auszulösen? (Ich benutze ESLint).

Answer 1

Eine andere Cleaner-Methode wird sein, die classNames in einem Array zu speichern und sie zu verbinden.

render() { const classNames = ['col-xs-6', 'col-xs-offset-3', 'col-md-4', 'col-md-offset-4', 'col-lg-2', 'col-lg-offset-5'] return ( <h1 className={classNames.join(' ')}>Some text</h1> ); }

Answer 2

Normalerweise wickle ich die Strings in mehrere Zeilen und verkette sie. Vergessen Sie nicht, Leerzeichen am Ende oder Anfang der Strings hinzuzufügen.

So für Ihr Beispiel wäre es:

render() { 
return (
    <h1 className={ 
    'col-xs-6 ' + 
    'col-xs-offset-3 ' + 
    'col-md-4 ' + 
    'col-md-offset-4 ' + 
    'col-lg-2 ' + 
    'col-lg-offset-5'}>Some text</h1> 
); 
} 

So kann man es auch viel einfacher zu scannen, die Klassennamen Sie eingestellt haben.

Hier ist ein great resource für einige Best-Practice-Codiermuster, zusammen mit ihren jeweiligen ESLint oder JSCS-Option.

Answer 3

Sie können auch classNames verwenden:

classNames('foo', 'bar'); // => 'foo bar' 
classNames('foo', 'bar'); // => 'foo bar' 
classNames('foo', { bar: true }); // => 'foo bar' 
classNames({ 'foo-bar': true }); // => 'foo-bar' 
classNames({ 'foo-bar': false }); // => '' 

Vielleicht können Sie einige Ihrer Klassen als Variable definieren, und es wiederverwenden.

Answer 4

@Imamudin Naseem Lösung mit einigen Code-Stil Verbesserungen

Ich würde vorschlagen, Code-Stil zu verbessern und Klassennamen direkt als String

render() { 
    const classNames = [ 
    'col-xs-6', 
    'col-xs-offset-3', 
    'col-md-4', 
    'col-md-offset-4', 
    'col-lg-2', 
    'col-lg-offset-5' 
    ].join(' ') 

    return (
    <h1 className={classNames}> 
     Some text 
    </h1> 
); 
}