Translate 10.3-class-name-manipulation.md to Japanese
Kohei TAKATA committed
Jul 17, 2015 at 08:51 UTC
990caa4a9a73aaa3b65c8e7dbc975abdb2f1bc5b
1 file changed
+61
docs/docs/10.3-class-name-manipulation.ja-JP.md
new
+61
@@ -0,0 +1,61 @@
1
+---
2
+id: class-name-manipulation
3
+title: クラス名の操作
4
+permalink: class-name-manipulation-ja-JP.html
5
+prev: two-way-binding-helpers-ja-JP.html
6
+next: test-utils-ja-JP.html
7
+---
8
+
9
+> 注意:
10
+> このモジュールは現在[JedWatson/classnames](https://github.com/JedWatson/classnames)に独立して存在しており、Reactは変更を検知していません。したがって、こちらは将来削除される予定です。
11
+
12
+`classSet()` はDOMの `class` 文字列を簡単に操作するすっきりとしたユーティリティです。
13
+
14
+以下は、 `classSet()` を使用しない共通なシナリオと解決策です。
15
+
16
+```javascript
17
+// `<Message />` などの中のReactコンポーネント
18
+render: function() {
19
+ var classString = 'message';
20
+ if (this.props.isImportant) {
21
+ classString += ' message-important';
22
+ }
23
+ if (this.props.isRead) {
24
+ classString += ' message-read';
25
+ }
26
+ // 'message message-important message-read'
27
+ return <div className={classString}>Great, I'll be there.</div>;
28
+}
29
+```
30
+
31
+上記は、クラス名を文字列として渡しているので、面倒で、読みにくく、エラーが発生しやすくなります。以下のように、 `classSet()` を使用するとこの問題が解決します。
32
+
33
+```javascript
34
+render: function() {
35
+ var cx = React.addons.classSet;
36
+ var classes = cx({
37
+ 'message': true,
38
+ 'message-important': this.props.isImportant,
39
+ 'message-read': this.props.isRead
40
+ });
41
+ // 同様に最終的には文字列になりますが、クリアにはなります
42
+ return <div className={classes}>Great, I'll be there.</div>;
43
+}
44
+```
45
+
46
+ `classSet()` を使用する際には、キーと、必要であったり、必要でないCSSのクラス名をオブジェクトとして渡してください。値が真であるものはキーとなり、最終的には文字列の一部になります。
47
+
48
+`classSet()` もまた、以下のように連結した文字列の引数としてクラス名を渡します。
49
+
50
+```javascript
51
+render: function() {
52
+ var cx = React.addons.classSet;
53
+ var importantModifier = 'message-important';
54
+ var readModifier = 'message-read';
55
+ var classes = cx('message', importantModifier, readModifier);
56
+ // 最終的な文字列は 'message message-important message-read'
57
+ return <div className={classes}>Great, I'll be there.</div>;
58
+}
59
+```
60
+
61
+文字列の連結を手で書くのはやめましょう！