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