You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
11 years ago
|
---
|
||
|
|
id: class-name-manipulation
|
||
|
|
title: Class Name Manipulation
|
||
|
|
layout: docs
|
||
|
|
permalink: class-name-manipulation.html
|
||
|
|
prev: form-input-binding-sugar.html
|
||
|
|
next: examples.html
|
||
|
|
---
|
||
|
|
|
||
|
|
`classSet()` is a neat utility for easily manipulating the DOM `class` string.
|
||
|
|
|
||
|
|
Here's a common scenario and its solution without `classSet()`:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// inside some `<Message />` React component
|
||
|
|
render: function() {
|
||
|
|
var classString = 'message';
|
||
|
|
if (this.props.isImportant) {
|
||
|
|
classString += ' message-important';
|
||
|
|
}
|
||
|
|
if (this.props.isRead) {
|
||
|
|
classString += ' message-read';
|
||
|
|
}
|
||
|
|
// 'message message-important message-read'
|
||
|
|
return <div className={classString}>Great, I'll be there.</div>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. `classSet()` solves this problem:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
render: function() {
|
||
|
|
var classSet = React.addons.classSet;
|
||
|
|
var classes = {
|
||
|
|
'message': true,
|
||
|
|
'message-important': this.props.isImportant,
|
||
|
|
'message-read': this.props.isRead
|
||
|
|
}
|
||
|
|
// same final string, but much cleaner
|
||
|
|
return <div className={classSet(classes)}>Great, I'll be there.</div>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Pass to `classSet()` an object, whose key is the CSS class name you might or might not need, and whose value is a boolean (or anything that converts to it) that indicates whether the key should be present in the final class string.
|
||
|
|
|
||
|
|
No more hacky string concatenations!
|