React之组件
鉴于个人的开发习惯,我将react默认的文件结构作了如下修改:
我们的项目是写在src目录下的。
那么,接下来,继续看react的组件式如何编写的吧。
一、react的组件
不同于vue的每个组件都是一个vue文件(其实就是一个包含css,js,html的页面),react每个组件都是js文件。它长这样:
你也可以选择不用class写,而是直接用function写(开启了babel的js高亮:view
, Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)
):
二、Props
写组件的话,里面的数据当然不能写死咯,所以,依然是使用props来传递用户自定义的数据。
组件:
调用:
最终渲染:
如果你是用function的话,你可能要作如下改动:
注意:组件名称必须以大写开头!!!组件名称必须以大写开头!!!组件名称必须以大写开头!!!
三、父子组件
最终渲染:
React之组件的更多相关文章
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- Griddle, griddle-react 一个REACT 表格组件
Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- reactjs入门到实战(七)---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- React的组件用法
React.createClass() 中文翻译 https://discountry.github.io/react/3.4K ( https://doc.react-china.org868 ) ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
- React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...
随机推荐
- 2045331 《Java程序设计》第09周学习总结
2045331 <Java程序设计>第09周学习总结 教材学习内容总结 第十六章 整合数据库 16.1.1JDBC简介 1.JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接 ...
- MAC OS X的命令行技巧
##透明度#降低透明度defaults write com.apple.universalaccess reduceTransparency -bool true#恢复默认透明度defaults wr ...
- Windows Server 2008驱动安装全攻略
安装设备驱动程序原本是一件非常简单的事情,很多驱动程序在安装的时候我们只要不停单击“下一步”按钮,就能让驱动程序顺利地在对应计算机系统“落户”;不过,当身边的计算机系统升级为Windows Serve ...
- .Net HttpClient form-data格式请求
var multipartFormDataContent = new MultipartFormDataContent(); multipartFormDataContent.Add(new Stri ...
- mongodb可视化客户端下载
网站:https://www.mongodbmanager.com/files/ 直接下载:https://www.mongodbmanager.com/files/mongodbmanagerpro ...
- HDU1698 just a Hook - 带有lazy标记的线段树
2017-08-30 16:44:33 writer:pprp 上午刚刚复习了一下不带有lazy标记的线段树, 下午开始学带有lazy标记的线段树 这个是我看大佬代码敲的,但是出了很多问题, 这提醒我 ...
- 「SSH 黑魔法」: 代理、端口转发和 shell 共享
在好朋友的推荐下,我看了这个视频: The Black Magic Of SSH 这个视频里面,介绍了 ssh 的一些高级应用:结合工作的经历,两类问题会对我们平时的工作帮助很大: 1. 两个人怎么 ...
- jQuery获取属性值的方法
1.利用绑定事件: $(".callback").on("click","#knbh",function(){ ***** ...
- 关于Eclipse SVN 分支 与主干 小结
SVN建立分支和合并代码 https://blog.csdn.net/luofeixiongsix/article/details/52052631 SVN创建指定版本号的分支 https://blo ...
- 一切从Trade开始(转)
taobao.trades.sold.get 取得交易列表 从店铺取得时间 taobao.shop.get (nick,field)shop.created 循环读取从开店时间到当前时间的所有交易 t ...