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 & Support <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"));
Ich benutze classnames . Zum Beispiel:
...
var liClasses = classNames({
'main-class': true,
'activeClass': self.state.focused === index
});
return (<li className={liClasses}>{data.name}</li>);
...
Ich verwende ES6
Vorlagenliterale . 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'}`} />
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'} />
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
Dies kann mit ES6-Vorlagenliteralen erreicht werden:
<input className={`class1 ${class2}`}>
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>
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 ;)
Keine externen Bibliotheken erforderlich - verwenden Sie einfach ES6 template strings :
<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
Vielleicht kann classnames Ihnen helfen.
var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'
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(' ')}
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 ''
}
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} />
)
}
Verwenden Sie https://www.npmjs.com/package/classnames
importiere Klassennamen aus 'Klassennamen';
Kann mehrere Klassen mit getrennten Kommas verwenden:
<li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>
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]}
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} />
)
}
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>
Ich bind
classNames
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>
für weitere Klassen wird className = {${classes.hello} ${classes.hello1}
hinzugefügt.
Das ist, was ich tue:
Komponente:
const Button = ({ className }) => (
<div className={ className }> </div>
);
Aufrufende Komponente:
<Button className = 'hashButton free anotherClass' />
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"