Browse Source

add docs on `classSet` add-on

main
Cheng Lou 11 years ago
parent
commit
87c91649f3
  1. 2
      _config.yml
  2. 2
      docs/09.2-form-input-binding-sugar.md
  3. 46
      docs/09.3-class-name-manipulation.md

2
_config.yml

@ -58,6 +58,8 @@ nav_docs_sections:
title: Animation
- id: form-input-binding-sugar
title: Form Input Binding Sugar
- id: class-name-manipulation
title: Class Name Manipulation
- id: examples
title: Examples
- title: Reference

2
docs/09.2-form-input-binding-sugar.md

@ -4,7 +4,7 @@ title: Form Input Binding Sugar
layout: docs
permalink: form-input-binding-sugar.html
prev: animation.html
next: examples.html
next: class-name-manipulation.html
---
`ReactLink` is an easy way to express two-way binding with React.

46
docs/09.3-class-name-manipulation.md

@ -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…
Cancel
Save