Update react style guide for jsx/object-curly-spacing never (#13889)
This commit is contained in:
parent
8024a07672
commit
039d6d8cca
|
@ -5,14 +5,14 @@ Stateless function components are more concise, and there are plans for react to
|
|||
Good:
|
||||
```
|
||||
export function KuiButton(props) {
|
||||
return <button className="kuiButton" { ...props } />
|
||||
return <button className="kuiButton" {...props} />
|
||||
};
|
||||
```
|
||||
Bad:
|
||||
```
|
||||
export class KuiButton extends React.Component {
|
||||
render() {
|
||||
return <button className="kuiButton" { ...this.props } />
|
||||
return <button className="kuiButton" {...this.props} />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ export class ClickCounter extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <button className="kuiButton" onClick={ this.onClick } />
|
||||
return <button className="kuiButton" onClick={this.onClick} />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -48,7 +48,7 @@ Bad:
|
|||
}));
|
||||
},
|
||||
render() {
|
||||
return <button className="kuiButton" onClick={ this.onClick } />
|
||||
return <button className="kuiButton" onClick={this.onClick} />
|
||||
}
|
||||
});
|
||||
```
|
||||
|
@ -92,14 +92,14 @@ Good:
|
|||
```
|
||||
button.js:
|
||||
export function KuiButton(props) {
|
||||
return <button className="kuiButton" { ...props } />
|
||||
return <button className="kuiButton" {...props} />
|
||||
};
|
||||
```
|
||||
Bad:
|
||||
```
|
||||
button.js:
|
||||
export function Button(props) {
|
||||
return <button className="kuiButton" { ...props } />
|
||||
return <button className="kuiButton" {...props} />
|
||||
};
|
||||
```
|
||||
The filenames leave it off because snake casing already increases file name length.
|
||||
|
@ -108,8 +108,8 @@ The filenames leave it off because snake casing already increases file name leng
|
|||
|
||||
Name action functions in the form of a strong verb and passed properties in the form of on<Subject><Change>. E.g:
|
||||
```
|
||||
<sort-button onClick={ action.sort }/>
|
||||
<pagerButton onPageNext={ action.turnToNextPage } />
|
||||
<sort-button onClick={action.sort}/>
|
||||
<pagerButton onPageNext={action.turnToNextPage} />
|
||||
```
|
||||
|
||||
### Avoid creating a function and passing that as a property, in render functions.
|
||||
|
@ -124,7 +124,7 @@ export class ClickCounter extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <button className="kuiButton" onClick={ this.onClick } />
|
||||
return <button className="kuiButton" onClick={this.onClick} />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -141,7 +141,7 @@ export class ClickCounter extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <button className="kuiButton" onClick={ this.onClick } />
|
||||
return <button className="kuiButton" onClick={this.onClick} />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -156,7 +156,7 @@ export class ClickCounter extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <button className="kuiButton" onClick={ () => this.onClick() } />
|
||||
return <button className="kuiButton" onClick={() => this.onClick()} />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -193,13 +193,13 @@ this.setState({
|
|||
### Favor spread operators
|
||||
```
|
||||
render() {
|
||||
return <button className="kuiButton" { ...this.props } />
|
||||
return <button className="kuiButton" {...this.props} />
|
||||
}
|
||||
```
|
||||
```
|
||||
export function Button({ className, ...rest }) {
|
||||
const classNames = classNames('KuiButton', className);
|
||||
return <button className={ classNames } { ...rest } />
|
||||
return <button className={classNames} {...rest} />
|
||||
};
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in a new issue