mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
add docs on classSet add-on
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
Normal file
46
docs/09.3-class-name-manipulation.md
Normal file
@@ -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!
|
||||
Reference in New Issue
Block a user