mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +08:00
6
Code convention for antd
Sebastian Blade edited this page 2017-03-03 21:28:11 +08:00
Any component from react-component should be named with prefix Rc.
// Good
import RcSlider from 'rc-slider';
// Bad
import Slider from 'rc-slider';
All the components of antd should use its name in documentation.
// Good
class Button extends React.Component {}
// Bad
class AntButton extends React.Component {}
This will make it more clear in developer tool.
Extends React.Component instead of Component
// Good
import React from 'react';
class Button extends React.Component {}
// Bad
import React, { Component } from 'react';
class Button extends Component {}
Bind this in class definition with ES6 syntax
// Good
class Button extends React.Component {
onClick = () => {}
render() {
return <button onClick={this.onClick} />
}
}
// Bad
class Button extends React.Component {
onClick() {}
render() {
return <button onClick={this.onClick.bind(this)} />
}
}
// Bad
class Button extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {}
render() {
return <button onClick={this.onClick} />
}
}
Define static property in class definition
// Good
class Button extends React.Component {
static propTypes = {...}
static defaultProps = {...}
}
// Bad
class Button extends React.Component {}
Button.propTypes = {...};
Button.defaultProps = {...};