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>
react书写规范小记的更多相关文章
- 4.1 react 代码规范
关于 基础规范 组件结构 命名规范 jsx 书写规范 eslint-plugin-react 关于 在代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通, ...
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- 数据库DDL语句书写规范
数据库DDL语句书写规范 1.SQL语句编写说明编写SQL语句应遵循统一的规范,包括大小写.空格.换行.缩进等等,只有完全一样的SQL才能在数据库中共享,从而减少硬解析. 字段类型.长度:根据数据情况 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- css命名书写规范小结。
单行形式书写风格的排版约束 1. 每一条规则的大括号 { 前后加空格 2. 多个selector共用一个样式集,则多个selector必须写成多行形式 3. 每一条规则结束的大括号 } 前 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
随机推荐
- HCNA配置接口IP地址
1.拓扑图 2.R1配置 The device is running! <Huawei>sys <Huawei>system-view Enter system view, r ...
- 音乐代码 (DNF天空之城、欢乐颂)。
太感人了 DNF天空之城 #include <cstdio> #include <windows.h> #define qdo 262 #define qre 294 #def ...
- Computer Science: the Big Picture
1.课程PPTMIT OpenCourseWarehttp://ocw.mit.edu/courses/; Courses Stanfordhttp://cs.stanford.edu/course ...
- framework7 v2.x轮播图写法:
<div class="swiper-container swiper-init travel-index-swiper"> <div class="s ...
- LCA最近公共祖先(POJ1330)
题目链接:http://poj.org/problem?id=1330 解题报告: 先将一个子节点,深搜每一个根节点,并标记. 然后深索另一个子节点,当发现访问过了,就找到了最近的公共祖先. #inc ...
- numpy 矩阵运算
8.2 矩阵(Matrix)对象 Matrix类型继承于ndarray类型,因此含有ndarray的所有数据属性和方法.Matrix类型与ndarray类型有六个重要的不同点,当你当Matrix对象当 ...
- p2597 灾难
我的思路 代码: #include<cstdio> #include<iostream> #include<algorithm> #include<vecto ...
- 最大独立集问题-maximal independent set problem
原文链接 http://blog.csdn.net/xin_jmail/article/details/29597471 http://blog.csdn.net/xin_jmail/article/ ...
- IBM区块链总经理谈区块链
IBM区块链总经理谈区块链:3.4年前IBM的区块链人员就达到了1500人 Captain Hiro 2018-03-20 16:22 发布在 区块链 3 18349 CCN的记者Eric Eiss ...
- iOS之旅--隐藏(去除)导航栏底部横线
iOS之旅--隐藏(去除)导航栏底部横线 iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分 ...