React 类名命名约定

Question

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

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

<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

这完全取决于您（和您的团队）的偏好。 React（也不是普通 HTML）不会限制您使用小写、虚线或驼峰式 class 名称。

但是，我建议您选择现有的 CSS 约定，例如 BEM。这将确保 class 名称在整个过程中保持一致（如果遵循正确）。

我们在我们的项目中选择了自定义约定来匹配我们的组件 class 名称与组件名称。

示例：

const NavBar = () => (
  <header className="NavBar NavBar--fixed">
    <div className="NavBar-brand"></div>
  </header>
);

如您所见，这看起来很像 BEM，除了 pascal 大小写的块、元素的单破折号分隔符和块修饰符的双破折号分隔符。

Answer 2

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

组件名称

组件名称应在 PascalCase 中。

例如MyComponent,MyChildComponent等

属性

属性名称应为 camelCase。

例如className,onClick等

内联样式

内联样式应该是 camelCase。

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

变量名

变量名可以是camelCase（好的做法）、PascalCase（可避免的）、lowercase，也可以包含number和special caracters。

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

Class 姓名

Class names 可以是任何东西 camelCase, PascalCase, lowercase, 也可以包含 number and special caracters, 因为毕竟它是一个 字符串 。

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

Answer 3

TLDR：PascalCase 和 Block__Element--Modifier

查看 create-react-app 的官方 doc。它提供了创建自定义组件的最小示例。 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" />;
  }
}

此外，文档还为组件内部的元素提供了外部link, which describes BEM naming conventions (link)。

// 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;
}

React 类名命名约定

React className naming convention

naming-conventions

reactjs