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/ ...
随机推荐
- Node.js读取文件内容并返回值(非异步)
主要解决的问题的,以最近VsCode插件开发为例,每次请求都需要token,而vscode并不支持cookie这样的存储,所以就采用粗暴点办法,存到某个用户目录下并读取. 源码如下: var fs=r ...
- ISCC:Please give me username and password!
地址:http://118.190.152.202:8017/ 题目说 给用户名和密码, 构造url为:118.190.152.202:8017/?username=sda&password= ...
- [MicroPython]TurniBit开发板旋转按钮控制脱机摆动
一.实验目的: ?学习在PC机系统中扩展简单I/O 接口的方法 ?学习TurnipBit拼插编程 ?了解舵机工作原理 ?学习TurnipBit扩展板舵机和旋转按钮接线方式 二.所需原器件: ?Turn ...
- mac nginx 启动 自启动
MacBook-Pro:local shihw$ brew services start nginx ==> Tapping homebrew/services Cloning into '/u ...
- 用 Django 管理现有数据库
在多数项目中,总有一些几乎一成不变的 CRUD 操作,编写这些代码很无聊,但又是整个系统必不可少的功能之一.我们在上一个项目中也面临类似的问题,虽然已经实现了一个功能相对完整的管理后台,也尽量做到了代 ...
- 深入理解Spring Boot数据源与连接池原理
Create by yster@foxmail.com 2018-8-2 一:开始 在使用Spring Boot数据源之前,我们一般会导入相关依赖.其中数据源核心依赖就是spring‐boot‐s ...
- 我的2017&2018
最近项目进入验收阶段,所以上班没那么忙碌了,但是怎么说呢,我可能天生是闲不住的主,觉得浑身不自在(我这样的人是不是特别不会享福),此处应该有个笑脸哈. 翻看了博客园好几个大牛写的技术文章,感慨大牛不愧 ...
- java----牛客练习
1. 形式参数就是函数定义时设定的参数.例如函数头 int min(int x,int y,int z) 中 x,y,z 就是形参.实际参数是调用函数时所使用的实际的参数. 真正被传递的是实参 ...
- Python_装饰器精讲_33
from functools import wraps def wrapper(func): #func = holiday @wraps(func) def inner(*args,**kwargs ...
- 软件工程(FZU2015) 学生博客列表(最终版)
FZU:福州大学软件工程 张老师的博客:http://www.cnblogs.com/easteast/ 经过前两周选课,最后正式选上课程的所有学生博客如下: 序号 学号后3位 博客 1 629 li ...