File tree Expand file tree Collapse file tree 1 file changed +16
-2
lines changed Expand file tree Collapse file tree 1 file changed +16
-2
lines changed Original file line number Diff line number Diff line change 129
129
return WithFoo;
130
130
}
131
131
` ` `
132
+
133
+ - ** 属性命名** : 避免使用DOM 相关的属性来用作其他的用途。
134
+
135
+ > 为什么?对于` style` 和 ` className` 这样的属性名,我们都会默认它们代表一些特殊的含义,如元素的样式,CSS class 的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读,更难维护,并且可能会引起bug。
136
+
137
+ ` ` ` jsx
138
+ // bad
139
+ <MyComponent style="fancy" />
140
+
141
+ // good
142
+ <MyComponent variant="fancy" />
143
+ ` ` `
144
+
132
145
## Declaration 声明模块
133
146
134
147
- 不要使用 ` displayName` 来命名React模块,而是使用引用来命名模块, 如 class 名称.
195
208
196
209
## Spacing 空格
197
210
198
- - 总是在自动关闭的标签前加一个空格,正常情况下也不需要换行.
211
+ - 总是在自动关闭的标签前加一个空格,正常情况下也不需要换行. eslint : [ ` no-multi-spaces ` ](http : // eslint.org/docs/rules/no-multi-spaces), [`react/jsx-space-before-closing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md)
199
212
200
213
` ` ` jsx
201
214
// bad
452
465
` ` `
453
466
454
467
- 在React模块中,不要给所谓的私有函数添加 ` _` 前缀,本质上它并不是私有的.
468
+ > 为什么?` _` 下划线前缀在某些语言中通常被用来表示私有变量或者函数。但是不像其他的一些语言,在JS 中没有原生支持所谓的私有变量,所有的变量函数都是共有的。尽管你的意图是使它私有化,在之前加上下划线并不会使这些变量私有化,并且所有的属性(包括有下划线前缀及没有前缀的)都应该被视为是共有的。了解更多详情请查看Issue [#1024 ](https: // github.com/airbnb/javascript/issues/1024), 和 [#490](https://github.com/airbnb/javascript/issues/490) 。
455
469
456
470
` ` ` jsx
457
471
// bad
473
487
}
474
488
` ` `
475
489
476
- - 在 ` render ` 方法中总是确保 ` return` 返回值 . eslint : [` require-render-return` ](https: // github.com/yannickcr/eslint-plugin-react/pull/502 )
490
+ - Be sure to return a value in your ` render ` methods . eslint : [` react/ require-render-return` ](https: // github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md )
477
491
478
492
` ` ` jsx
479
493
// bad
You can’t perform that action at this time.
0 commit comments