react用构造函数创建组件
有两种方法,一种是通过构造函数创建,一种是通过class创建
1、构造函数创建组件
用function+组件名的方式创建,创建好了,在render里面以标签的形式一丢就可以啦!但是这种方式必须要return一个什么,如果说你什么都不渲染,那就ruturn null,这种情况一般不会用,一般情况是return一个虚拟dom。
组件的重点就是如何接受外部传来的对象。假设定义了一个对象,然后用这个组件接收它。虚拟dom里面和render渲染的dom里面,前者是设置传的参数,这叫形参量的接收,由于它是一个形参,所以叫什么名字都可以,可以是props,也可以是person,也可以是student,什么名字都行,但是最好还是props,因为有语义。后者是真正的经过处理的值。
在下面代码 return的上面加一句console.log(props)就可以在页面调试中查看相关的值了。
组件中的props永远都是只读的,所以不能给他直接赋值。比如props.name=wanghuahua,如果这样写,会导致错误哦。
const person={ name:'Alice', age:18, gender:female } function Hello(props){ return <div>显示人物详情:{props.name}<br/>{props.age}|{props.gender}</div>} reactDOM.render( <div><Hello name={person.name} age={person.age} gender={person.gender}></Hello></div>,document.getElementById('app') )
react用构造函数创建组件的更多相关文章
- 使用 function 构造函数创建组件和使用 class 关键字创建组件
使用 function 构造函数创建组件: 如果想要把组件放到页面中,可以把构造函数的名称,当作 组件的名称,以 HTML标签形式引入页面中, 因为在React中,构造函数就是一个最基本的组件. 注意 ...
- react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
- React创建组件的三种方式及其区别
内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...
- React中创建组件的3种方式
目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...
- 301-React Ext-React创建组件的三种方式及其区别
一.概述 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形 ...
- React Native 学习-组件说明和生命周期
组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...
- react中创建组件
第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...
- react 创建组件 (二)component
因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例: import React from 'react'; class Greeting extends React. ...
- 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出
接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...
随机推荐
- p1012拼数题解
#include<iostream> #include<algorithm> using namespace std; bool cmp(string b,string a) ...
- devops工具-Ansible基础
一.Ansible介绍 简介 Ansible使用Python语言开发,是一个配置管理型工具,与之类似的工具还有Puppet.SaltStack.chef等,默认通过SSH协议进行远程命令执行或 ...
- Git&Github基本操作与分支管理
Git的原理涉及快照流.链表.指针等,这里不作过多叙述. 1.基本操作 git init 创建一个 Git 仓库 git clone [url] 拷贝一个 Git 仓库到本地 git add [fil ...
- jqGrid之treeGrid及行拖拽
单纯的做个小记录 今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录 treeGrid 树表格的应用在官网给出了很直白的例子: 1.http://blog.mn886.ne ...
- 不容错过的超赞项目管理PPT
不容错过的超赞项目管理PPT(转载) 大公司的一个好处,是各个领域都有牛人,可以为你提供经验分享交流.腾讯庞大的培训体系更是保证了:如果你想学点什么东西,你总可以学到.腾讯内部资源30页PPT曝光 — ...
- MySQL复制表的方式以及原理和流程
复制表的俩种方式: 第一.只复制表结构到新表 create table 新表 select * from 旧表 where 1=2 或者 create table 新表 like 旧表 第二.复制表结 ...
- PHP开发web应用安全总结
XSS跨站脚本 概念:恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意用户的特殊目的. 危害: 盗取用户COOKIE信息. 跳转 ...
- iOS开发之一句代码检测APP版本的更新
提示更新效果图如下,当然也是可以自定义类似与AlertView相似的自定义view,如京东.网易云音乐都是自定义了这种提示框的view.以下只展示,从App Store获取到app信息.并解析app信 ...
- 堆排、python实现堆排
一.堆-完全二叉树 堆排序是利用堆这种数据结构而设计的一种排序算法,堆排序是一种选择排序,它的最坏,最好,平均时间复杂度均为O(nlogn),是不稳定排序 堆排序中的堆有大顶堆.小顶堆两种.他们都是完 ...
- BAT (中国互联网公司三巨头)
BAT,B=百度.A=阿里巴巴.T=腾讯,是中国互联网公司百度公司(Baidu).阿里巴巴集团(Alibaba).腾讯公司(Tencent)三大互联网公司首字母的缩写.百度总部在北京.阿里巴巴总部在浙 ...