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/ ...
随机推荐
- Luogu P3379 【模板】最近公共祖先(LCA)
qwq 预处理出从$x$节点向上跳2i个节点的序号$p[x][i]$及节点深度$dpth[x]$, 寻找$lca$时,从$Max$(可能的最大深度)到0枚举$i$, 首先把较深的一个节点向上跳至深度相 ...
- BZOJ3601 一个人的数论 莫比乌斯反演、高斯消元/拉格朗日插值
传送门 题面图片真是大到离谱-- 题目要求的是 \(\begin{align*}\sum\limits_{i=1}^N i^d[gcd(i,n) == 1] &= \sum\limits_{i ...
- 记一次InputStream引起的乱码
项目上线一周后,正准备看新闻的我突然接到了一个任务.线上突然出现了一条乱码的数据,需要解决这个bug.于是我放下了手中的保温杯,开始解决这个bug.经过一番折腾,发现是有一个同事在处理IO流上写得有点 ...
- 每秒高达1.6亿次操作的并发键值存储库 FASTER 诞生
FASTER 在过去十年中,云中的数据密集型应用程序和服务有了巨大的增长.数据在各种边设施(例如,设备,浏览器和服务器)上创建,并由云应用程序处理用来获得数据价值或做出决策.应用程序和服务可以处理收集 ...
- 修改docker0默认IP地址
第一步:vim /etc/docker/daemon.json { "registry-mirrors": ["https://docker.mirrors.ustc.e ...
- 固态硬盘的PCIE,SATA,M2,NVMe,AHCI分别都指什么?别再搞混了
原文:https://baijiahao.baidu.com/s?id=1616207956596122967&wfr=spider&for=pc 科技娱乐屋 18-11-0420:5 ...
- img :src=“” url()
<img :src="logoImg"> this.logoImg='/static/images/'+adminUser.Logo; v-bind:style=&qu ...
- 软件工程练习:模块化,单元测试,回归测试,TDD
这是<构建之法>实战教学的一部分.适合作为同学们的第二个程序作业. 第一个程序作业: 请看 “概论” 一章的练习,或者老师的题目,例如这个. 作业要求: 软件工程的作业越来越有意思了, 我 ...
- 亲测可以永久破解2018版本的pycharm
pycharm是很强大的开发工具,但是每次注册着实让人头疼.网络上很多注册码.注册服务器等等.但都只是一年或者不能用:为次有如下解决方案.亲测有效!!! 如果想让pycharm永久被激活,比如截止日到 ...
- RabbitMQ消息的交换
消息的交换 目录 RabbitMQ-从基础到实战(1)— Hello RabbitMQ RabbitMQ-从基础到实战(2)— 防止消息丢失 1.简介 在前面的例子中,每个消息都只对应一个消费者,即使 ...