自定义多行的代码片断

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面再去定义一个生成 React 组件的一个代码片断 .. 这个代码片断里面有多行内容 .. 打开 Atom 菜单,选择 Open Your Snippets ..

之前我们自定义过一个导入模块用的代码片断 .. 在之前定义的代码片断的下面,直接再定义一个代码片断 .. 名字是 React Component ..

冒号 .. 另起一行,缩进一下 .. 设置一下 prefix .. 也就是触发使用代码片断的东西 .. 这里设置成 rec .. 表示 React component ..

另起一起,再设置一下 body .. 因为这个代码片断是多行的,所以可以用三个双引号开始 .. 再用三个双引号结束 .. 中间这里可以是生成的代码片断的主体 ..

定义一个 React 组件就是定义一个 class .. 后面用一个 ${1:NAME} .. extends .. React.Component .. 一组大括号 ..

里面先用一个 constructor 方法 .. 添加一个 props 参数 .. 方法里面再用一下 super 方法 .. 把 props 交给它 ..

每个 React 组件都需要一个 render 方法 ... 在这个方法里面要返回一些东西 ... 在返回的东西这里,用一个 $2 ... 这样编辑完组件名字以后再按一下 tab 键就会跳转到这里,去编辑一下组件要显示的东西 ..

最后可能需要导出组件 .. 我们再去定义一个代码片断 .. 先复制一下刚才定义的这个 .. 修改一下名字 .. React Component with export ..

prefix 是 recx ,表示 React Component Export ..

最后再添加一行 .. export .. { ${1:NAME} as default };

保存 .. 打开一个 js 文件 .. 先试一下生成 React 组件的代码片断 .. 输入 rec .. 按一下 tab 键 ..

修改一下组件的名字 .. Search .. 再按一下 tab .. 会跳到 return 这里 .. 可以设置组件要显示的东西 ..

再试一下带导出的生成 React 组件的代码片断 .. 输入 recx .. 按一下 tab .. 输入组件的名字 .. 注意,在导出那里,也会同时修改 ..

自定义多行的代码片断《 Atom:代码编辑器 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点