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 元素必 ...
随机推荐
- REST API Design
- Ubuntu12.04 安装adb
1.通过apt-get安装adb sudo add-apt-repository ppa:nilarimogard/webupd8 sudo apt-get update sudo apt-get i ...
- linux启动过程⭐
启动第一步--加载BIOS当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬盘 ...
- shell编程学习笔记之sed编辑器
在shell编程中,大多数处理的都是文本文件.对文本文件进行处理除了使用交互式文本编辑器(vi[m],gedit......)也可以使用另外一类:流编辑器. 流编辑器:使用预定义的编辑规则来对文本进行 ...
- cp 复制 mv剪切
cp cp -p test.rb /home/test 将test.rb copy到test目录,并且保留原文件的属性cp -r Dir/ /home/test 将Dir目录copy到te ...
- wordpress安装插件提示“wordpress发生意外错误,可能WordPress.org或服务器配置文件存在问题”
安装wordpress插件,提示报错“wordpress发生意外错误,可能WordPress.org或服务器配置文件存在问题” 出问题的页面是http://*.*.*.*/wp-admin/updat ...
- JAXB和XStream比较
转自:https://www.cnblogs.com/tang9139/p/4825610.html http://www.cnblogs.com/wlsblog/p/7452882.html 这两东 ...
- PHPCMSV9的CKEDITOR编辑器增加行距
lineheight插件,下载地址:http://files.cnblogs.com/ysfng/ckeditor-lineheight.zip 第一步,下载lineheight插件,并解压到\cke ...
- CSS3:@font-face规则
前言 过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体.但Web安全字体有时并不好看... @font-face能够使得任何一台机器能够显示理想中的字体. ...
- linux限定用户目录及权限
setfacl -m u:username:rwx dir/file -m:添加或者修改 u[设置用户]:username[用户名]:rwx[设置权限] g[设置组]:groupname[组名]: ...