reactjs - React 类名命名约定

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

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

此外，文档还提供了外部 link ，它描述了组件内部元素的 BEM 命名约定 ( 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;
}