react组件的正确命名规范

correct naming specification for react components

本文关键字：组件 react      更新时间：2023-09-26

我正在努力为React.js应用程序中的组件找到最佳命名约定。这就是我目前的做法…

假设我有一个searchBar组件，我想在表的组件中渲染它。

搜索栏.js 

var React = require('react');
var SearchBar = React.createClass({
  /* code for search component */
});
module.exports = SearchBar;

table.js

var React = require('react');
var SearchBar = require('search-bar');
var Table = React.createClass({
    render: function() {
        return (
                <SearchBar />
        );
    }
});
module.exports = Table;

这种命名约定可以吗？还是标准的？

  • 用连字符分隔的表示组件文件名
  • PascalCase用于组件函数声明

从一般意义上讲，react似乎足够年轻，还没有太多特别强烈的风格惯例，但您所概述的内容反映了我所看到的大部分内容。react文档记录了所有PascalCase的组件名称，如果确实存在模块文件名的样式约定，则以连字符分隔似乎远远高于最常见的。

这是一种被广泛采用的命名约定，运行良好。另外，如果您正在为组件的名称而苦恼，请查看其根HTML元素类名。我发现这是个好办法。

相关文章：