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. ...
随机推荐
- vue短信验证码组件
Vue.component('timerBtn',{ template: '<button v-on:click="run" :disabled="disabled ...
- 笨办法学Python(十一)
习题 11: 提问 我已经出过很多打印相关的练习,让你习惯写简单的东西,但简单的东西都有点无聊,现在该跟上脚步了.我们现在要做的是把数据读到你的程序里边去.这可能对你有点难度,你可能一下子不明白,不过 ...
- window下mycat要放在根目录下
原理文档没有跟我开玩笑呢? 建议放在盘符根目录下 ,无视的我,检查了多遍jdk环境,检查了多遍bat文件内容,仍然没有解决 找不到或无法加载主类 直到我乖乖的把目录放跟盘符才解决,心好累= =! 可能 ...
- jrtplib源码分析 第一篇 jthread的编译与分析
第一篇 jthread的编译与分析 jrtplib代码依赖库jthread,因此先从jthread开始jrtplib的学习.首先从以下链接下载jthread的源代码http://research.ed ...
- Java UUID Generator(JUG)
UG 是一个纯 Java 的 UUID 生成器. UUID是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成UUID的API.UUID按照开放软件基金 会 (OS ...
- InnoDB多版本(MVCC)实现简要分析
转载自:http://hedengcheng.com/?p=148 基本知识 假设对于多版本(MVCC)的基础知识,有所了解.InnoDB为了实现多版本的一致读,采用的是基于回滚段的协议. 行结构 I ...
- 2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Oracle 11g基础
一.打开.关闭数据库 sqlplus "/as sysdba" connect system/manager as sysdba 关闭 shutdown immediate; 打开 ...
- maven parent version not found
需要把parent工程,也就是package是pom的那个工程先install一下 要是不行的话可以试下mvn -X clean install,-X表示强制从远程库更新dependency:再不行可 ...
- [P1363] 幻想迷宫
题目链接 很好的一道搜索题,应该是利用了离散化的思想我好蒟蒻呀 地图是根据给定的图无限的拼接的. 所以说暴力建图是不可取的. 其实不难看出,在跨越两张图时.我们就可以看做这个点时空穿梭一般.从底下回来 ...