Cheng Lou
11 years ago
3 changed files with 49 additions and 1 deletions
@ -0,0 +1,46 @@ |
|||||
|
--- |
||||
|
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! |
Loading…
Reference in new issue