React className 命名约定

Question

正如我们所知，我们应该在原始 html 中使用小写和破折号作为 css 类名（例如<div class="lower-case-dash" />）。在 React JSX 中呢？

对于 html 元素和其他 React 组件，css 类名的命名约定是什么？驼峰式还是破折号？

<div className="divClass">Something</div>
<div className="DivClass">Something</div>
<div className="div-class">Something</div>
<SomeComponent className="SomeComponent" />
<SomeComponent className="some-component" />

Answer 1

TLDR：PascalCase和Block__Element--Modifier

退房的官方文档中create-react-app。它提供了创建自定义组件的最小示例。在js和css文件名以及的className都是以下PascalCase。

// Button.css
.Button {
  padding: 20px;
}

// Button.js
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

此外，该文档还提供了一个外部链接，它描述了组件内部元素的BEM 命名约定（链接）。

// MyComponent.js
require('./MyComponent.less');
import { Component } from 'react';
export default class MyComponent extends Component {
  render() {
    return (
      <div className="MyComponent">
        <div className="MyComponent__Icon">Icon</div>
        ...
      </div>
    );
  }
}

// MyComponent.less
.MyComponent__Icon {
  background-image: url('icon.svg');
  background-position: 0 50%;
  background-size: fit;
  height: 50px;
}

Answer 2

一些命名约定（推荐）是：

1. 组件名称

   组件名称应在PascalCase.

   例如 MyComponent，MyChildComponent等。

2. 属性

   属性名称应该是camelCase.

   例如 className，onClick等。

3. 内联样式

   内联样式应该是camelCase.

   例如， <div style={{color:'blue',backgroundColor:'black',border: '1px solid',borderRadius:'4px'}}>My Text</div>等等。

4. 变量名

   变量名可以是camelCase(Good practice), PascalCase(Avoidable), lowercase, 也可以包含number和special caracters。

   例如， state = {variable:true, Variable:true, variableName:true}等等。

5. 班级名称

   类名可以是任何东西camelCase，PascalCase, lowercase，也可以包含numberand special caracters，因为它毕竟是一个字符串。

   例如， className="myClass MyClass My_Class my-class"等等。