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/ ...
随机推荐
- 一步一步写出java swing登录界面,以及输入的参数获取
经过好几天的学习,研究,接下来说说java swing,以及内嵌浏览器的方法. 一.swing是一个用于java应用程序用户界面的的开发工具包. 例如:接下来我们做个登录界面,简要说明 做之前的构想图 ...
- bootstrapvalidator 用法
1.引入js.css 2.用法 API:http://bootstrapvalidator.votintsev.ru/api/ 参考博客:https://blog.csdn.net/u01393846 ...
- H5海报制作实践
引言 年后一直处于秣马厉兵的状态,上周接到了一个紧急需求,为38妇女节做一个活动页,主要功能是生成海报,第一次做这种需求,我也是个半桶水前端,这里将碰到的问题.踩的坑,如何解决的分享给大家,讲的不到位 ...
- SAI窗口无法移动
昨天开SAI遇到了一个很奇怪的问题,改变了双屏的位置后SAI的窗口不能移动两边也有黑边,貌似是这样,标题栏只能进行上下改变窗口大小,不能移动窗体 问题是这样出现的:把任务栏解除锁定拖到侧边就会这样 解 ...
- JWT认证原理及使用
一.JWT原理: 参考文章:https://www.jianshu.com/p/180a870a308a 1.传统的登录方式: 浏览器输入用户名密码,服务端校验通过,根据用户信息生成一个token,将 ...
- eclipse 执行自带的maven命令无效
原文地址:https://blog.csdn.net/qq_26386171/article/details/78262702 下面加上(前提是你的环境变量里已经配置过) -Dmaven.multiM ...
- 学习用Node.js和Elasticsearch构建搜索引擎(4): 构建Elasticsearch搜索引擎
一.目标 使用node搭建一个知识库检索系统,要求词条平均检索速度必须在1s以内. 二.思路. 本人思路如下图. 橙色部分为我们要开发的内容, ES服务搭建(暂时用单节点测试,集群搭建以后再说), 三 ...
- 【转载】KETTLE集群搭建
一.集群的原理与优缺点 1.1集群的原理 Kettle集群是由一个主carte服务器和多个从carte服务器组成的,类似于master-slave结构,不同的是’master’处理具体任务,只负责任务 ...
- D2. Great Vova Wall (Version 2)
l链接 [https://codeforces.com/contest/1092/problem/D2] 题意 和D1一样只是不能竖直放了 分析 水平放的话,就只可能是相邻等时才可以,而且你会发现 只 ...
- org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.bw.mapper.BillMapper.getBillList at org.apache.ibatis.binding.MapperMethod$SqlCommand.<init>(MapperMethod.java:225
这个错误是没有找到映射文件 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.b ...