Reactjs 反应类名命名约定

正如我们所知，我们应该在原始html中使用小写和破折号作为css类名（例如

）。那么在React JSX中呢

对于html元素和其他组件，css类名的命名约定是什么？卡米凯斯还是达什

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

什么 某物 某物

---

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

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

我们在项目中选择了自定义约定，以将组件类名与组件名相匹配

例如：

const导航栏=（）=>(
);

---

如您所见，这看起来很像边界元法，除了pascal大小写块、元素的单破折号分隔符和块修改器的双破折号分隔符之外。

一些命名约定（推荐）如下：

组件名称

组件名称应在

PascalCase

中

例如，

MyComponent

，

MyChildComponent

等

---

属性

属性名称应为

camelCase

例如，

className

，

onClick

等

---

内联样式

内联样式应该是

camelCase

例如，

我的文本

等

---

变量名

变量名可以是

camelCase

（良好实践），

PascalCase

（可避免），

小写

，也可以包含

数字

和

特殊字符

例如，

状态={variable:true，variable:true，variableName:true}

等

---

类名

类名可以是任何

camelCase

，

PascalCase

，

小写

，也可以包含

数字

和

特殊字符

，因为它毕竟是一个字符串

例如，

className=“myClass myClass My\u Class My Class”等

---

TLDR:

PascalCase

和

Block\u元素——修饰符

查看
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" />;
  }
}

//Button.css
.按钮{
填充：20px；
}
//Button.js
从“React”导入React，{Component}；
导入“./Button.css”；//告诉Webpack Button.js使用这些样式
类按钮扩展组件{
render（）{
//您可以将它们用作常规CSS样式
返回；
}
}

此外，文档还提供了一个外部文件，描述了组件内部元素的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;
}

//MyComponent.js
要求（'./MyComponent.less'）；
从“react”导入{Component}；
导出默认类MyComponent扩展组件{
render（）{
返回(
偶像
...
);
}
}
//无霉素
.MyComponent__图标{
背景图像：url（'icon.svg'）；
背景位置：0.50%；
背景尺寸：适合；
高度：50px；
}
您能分享资源吗？