it-swarm.com.de

So fügen Sie einer ReactJS-Komponente mehrere Klassen hinzu

Ich bin neu bei ReactJS und JSX und habe ein kleines Problem mit dem folgenden Code. 

Ich versuche, dem className-Attribut auf jeder li mehrere Klassen hinzuzufügen:

<li key={index} className={activeClass, data.class, "main-class"}></li>

Meine React-Komponente ist:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },

  clicked: function(index) {
    this.setState({ focused: index });
  },

  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map(function(data, index) {
            var activeClass = "";

            if (self.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});

ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));
196
Hector

Ich benutze classnames . Zum Beispiel:

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...
139
Jack

Ich verwende ES6Vorlagenliterale . Zum Beispiel:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

Und dann einfach rendern:

<input className={classes} />

Einliner-Version:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />
237
Damjan Pavlica

Verwenden Sie einfach JavaScript.

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

Wenn Sie einem Objekt Klassen-basierte Schlüssel und Werte hinzufügen möchten, können Sie Folgendes verwenden:

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

<li className={myClassNames} />

Oder noch einfacher:

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />
106
0xcaff

Concat

Keine Notwendigkeit, ausgefallen zu sein, ich verwende CSS-Module und es ist einfach

import style from '/css/style.css';

<div className={style.style1+ ' ' + style.style2} />

Dies führt zu:

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

Mit anderen Worten, beide Stile

63
Jamie Hutber

Dies kann mit ES6-Vorlagenliteralen erreicht werden:

<input className={`class1 ${class2}`}>
24
Cody Moniz

Sie können ein Element mit mehreren Klassennamen wie folgt erstellen:

<li className="class1 class2 class3">foo</li>

Natürlich können Sie eine Zeichenfolge verwenden, die die Klassennamen enthält, und diese Zeichenfolge bearbeiten, um die Klassennamen des Elements zu aktualisieren.

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>
23
nightlyop

So können Sie das mit ES6 machen:

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

Sie können mehrere Klassen und Bedingungen auflisten und statische Klassen hinzufügen. Es ist nicht notwendig, eine zusätzliche Bibliothek hinzuzufügen.

Viel Glück ;)

15
Hristo Eftimov

Vanille JS 

Keine externen Bibliotheken erforderlich - verwenden Sie einfach ES6 template strings :

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
10
Huw Davies

Vielleicht kann classnames Ihnen helfen.

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'
8
xsong

Durch das Hinzufügen können wir leere Zeichenfolgen herausfiltern.

className={[
    'read-more-box',
    this.props.className,
    this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}
4

Verspätet zur Party, aber warum sollte man sich für ein so einfaches Problem an Dritte wenden?

Man könnte es entweder als @Huw Davies erwähnen - am besten

1. <i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
2. <i className={[styles['foo-bar-baz'], 'fa fa-user', 'fa-2x'].join(' ')}

Beide sind gut. Das Schreiben kann jedoch für eine große App komplex werden. Um es optimal zu machen, mache ich dasselbe oben, aber stelle es in eine Hilfsklasse

Wenn Sie die unten abgebildete Hilfsfunktion verwenden, kann ich die Logik für die spätere Bearbeitung getrennt halten. Außerdem gibt es mehrere Möglichkeiten, die Klassen hinzuzufügen

classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')

oder

classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])

Dies ist meine Helferfunktion unten. Ich habe es in eine helper.js gestellt, in der ich alle meine üblichen Methoden einhalte. Da es sich um eine so einfache Funktion handelt, habe ich es vermieden, die Kontrolle über Dritte zu behalten

export function classNames (classes) {
    if(classes && classes.constructor === Array) {
        return classes.join(' ')
    } else if(arguments[0] !== undefined) {
        return [...arguments].join(' ')
    }
    return ''
}
3
Elton Jain

Ich glaube nicht, dass wir ein externes Paket verwenden müssen, um nur mehrere Klassen hinzuzufügen.

Ich persönlich benutze

<li className={`li active`}>Stacy</li> 
or <li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>

die zweite für den Fall, dass Sie Klassen bedingt hinzufügen oder entfernen müssen.

Wenn Sie kein anderes Modul importieren möchten, funktioniert diese Funktion wie das Modul classNames.

function classNames(rules) {
    var classes = ''

    Object.keys(rules).forEach(item => {    
        if (rules[item])
            classes += (classes.length ? ' ' : '') + item
    })

    return classes
} 

Sie können es so verwenden:

render() {
    var classes = classNames({
        'storeInfoDiv': true,  
        'hover': this.state.isHovered == this.props.store.store_id
    })   

    return (
        <SomeComponent style={classes} />
    )
}
2
Seth

Verwenden Sie https://www.npmjs.com/package/classnames

importiere Klassennamen aus 'Klassennamen';

  1. Kann mehrere Klassen mit getrennten Kommas verwenden:

    <li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>
    
  2. Kann mehrere Klassen mit durch Bedingung getrennten Kommas verwenden:

    <li className={classNames(classes.buttonArea, !nodes.length && classes.buttonAreaHidden)}>Hello World</li> 
    

Die Verwendung von Array als Requisiten für Klassennamen funktioniert ebenfalls, gibt jedoch eine Warnung aus, z.

className={[classes.tableCellLabel, classes.tableCell]}
1
Vikramjit Singh

Verwenden des TodoTextInput.js-Beispiels von facebook

render() {
    return (
      <input className={
        classnames({
          edit: this.props.editing,
          'new-todo': this.props.newTodo
        })}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  } 

classnames durch einfachen Vanilla-js-Code zu ersetzen, sieht folgendermaßen aus:

render() {
    return (
      <input
        className={`
          ${this.props.editing ? 'edit' : ''} ${this.props.newTodo ? 'new-todo' : ''}
        `}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }
1
Vlad Bezden

Sie können ein Element mit mehreren Klassennamen wie folgt erstellen. Ich habe es in beide Richtungen versucht. Es funktioniert einwandfrei.

Wenn Sie CSS importieren, können Sie folgendermaßen vorgehen: Weg 1:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

Weg 2:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

**

Wenn Sie CSS als interne anwenden:

const myStyle = {
  color: "#fff"
};

// React Element using Jsx
const myReactElement = (
  <h1 style={myStyle} className="myClassName myClassName1">
    Hello World!
  </h1>
);

ReactDOM.render(myReactElement, document.getElementById("app"));
.myClassName {
  background-color: #333;
  padding: 10px;
}
.myClassName1{
  border: 2px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app">
  
</div>
0
arvinda kumar

Ich bindclassNames des in die Komponente importierten css-Moduls.

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles); 

classnames gibt die Möglichkeit, className deklarativ für ein React-Element zu deklarieren.

ex: 

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes

Ich verwende React 16.6.3 und @Material UI 3.5.1 und kann Arrays in className wie className={[classes.tableCell, classes.capitalize]} verwenden

In Ihrem Beispiel wäre das Folgende ähnlich.

<li key={index} className={[activeClass, data.class, "main-class"]}></li>
0
Devakhim

für weitere Klassen wird className = {${classes.hello} ${classes.hello1} hinzugefügt.

0
Rama Krishna

Das ist, was ich tue:

Komponente:

const Button = ({ className }) => (
  <div className={ className }> </div>
);

Aufrufende Komponente:

<Button className = 'hashButton free anotherClass' />
0
RegarBoy

Ich benutze rc-classnames package. 

// ES6
import c from 'rc-classnames';

// CommonJS
var c = require('rc-classnames');

<button className={c('button', {
  'button--disabled': isDisabled,
  'button--no-radius': !hasRadius
})} />

Sie können Klassen in jedem Format (Array, Object, Argument) hinzufügen. Alle wahrheitsgemäßen Werte von Arrays oder Argumenten sowie Schlüssel in Objekten, die true entsprechen, werden zusammengeführt. 

zum Beispiel:

ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"
0
morajabi