react书写规范小记

1.对齐方式

//如果没有属性，在自闭和标签前添加一个空格：

<Footer />

//如果可以放在一行，放在一行上即可：

<Footer bar="bar" />

//如果是多个属性,直接属性换行对齐的方式，同时闭合标签是换行的：

<Footer

　bar="bar"

　className="footer"

/>

//如果是多行，采用缩进的书写方式：

<Footer

　　bar="bar"

　　className="footer"

>

　　<Button />

</Footer>

2.命名规则

//属性名称始终使用驼峰命名法

<Footer

　　className="footer"

　　showStatus="this.state.showStatus"

/>

//文件名使用帕斯卡命名。 例如： ReservationCard.jsx

import ReservationCard from './ReservationCard';

//React 组件使用帕斯卡命名，引用实例采用驼峰命名。

const reservationItem = <ReservationCard />;

//组件名称应该和文件名一致， 例如： ReservationCard.jsx 应该有一个ReservationCard的引用名称。

//但是， 如果是在目录中的组件， 应该使用 index.jsx 作为文件名 并且使用文件夹名称作为组件名

//即ReservationCard文件夹的目录里面有一个index.jsx的文件，组件的调用方式如下：

import ReservationCard from './ReservationCard';

//React 组件的内部方法命名不要使用下划线前缀

onClickSubmit(){}

3.属性的书写规范

//当标签没有子元素时，始终使用自闭合标签

<Footer className="footer" />

//当标签有子元素时，选择使用双标签闭合

<Footer

　　bar="bar"

　　className="footer"

>

　　<Button />

</Footer>