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>