时间戳

首页 > 解决方案 > 反应类名命名约定

reactjs - 反应类名命名约定

问题描述

正如我们所知，我们应该在原始 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" />

标签： reactjsnaming-conventions

解决方案

TLDR：PascalCase和Block__Element--Modifier

查看官方文档。create-react-app它提供了创建自定义组件的最小示例。和文件名以及js都在后面。cssclassNamePascalCase

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

推荐阅读