有两种方法,一种是通过构造函数创建,一种是通过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用构造函数创建组件的更多相关文章

  1. 使用 function 构造函数创建组件和使用 class 关键字创建组件

    使用 function 构造函数创建组件: 如果想要把组件放到页面中,可以把构造函数的名称,当作 组件的名称,以 HTML标签形式引入页面中, 因为在React中,构造函数就是一个最基本的组件. 注意 ...

  2. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  3. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  4. React中创建组件的3种方式

    目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...

  5. 301-React Ext-React创建组件的三种方式及其区别

    一.概述 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形 ...

  6. React Native 学习-组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  7. react中创建组件

    第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...

  8. react 创建组件 (二)component

    因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例: import React from 'react'; class Greeting extends React. ...

  9. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...

随机推荐

  1. Flask 框架 debug=Ture 和Json解码:

    Flask框架常用配置文件: 以下推荐四种方法: (一):创建一个配置类. (二):正常代码配置文件. 接下下来两种方法需要新建文件: 步骤为: 1:在当前目录下新建一个文件,名字为:config.i ...

  2. centos7 开放3306端口并可以远程访问

    开启远程访问: GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'root' WITH GRANT OPTION; 允许任何ip以roo ...

  3. keystone系列四:keystone部署及操作

    一 前言 任何软件的部署都是没有技术含量的,任何就部署讲部署的人都是江湖骗子. 部署的本质就是拷贝,粘贴,回车.我们家养了条狗,它可以胜任这件事情. 我们搞技术的,一定不能迂腐:轻信或者一概不信. 轻 ...

  4. Objective-C Programming The Big Nerd Ranch Guide 笔记 19-37

    Properties are either atomic or nonatomic, The difference has to do with multithreading. atomic is t ...

  5. A2D JS框架 - Web API CSRF保护实现

    这次自己实现了类似jQuery中ajax调用的方法,并且针对RESTFul进行了改造和集成,实现的A2D AJAX接口如下: $.ajax.RESTFulGetCollection("/ap ...

  6. Node.js这么下去...

    Node.js是基于javascript的.event驱动的单进程服务器(也能实现cluster模式,只要一个fork()语句,类似于C语言的进程创建). 所以大胆估计:Node.js会把很多大网站吞 ...

  7. 深入理解消息中间件技术之RabbitMQ服务

    什么叫消息队列? 消息(Message)是指在应用间传送的数据.消息可以非常简单,比如只包含文本字符串,也可以更复杂,可能包含嵌入对象. 消息队列(Message Queue)是一种应用间的通信方式, ...

  8. 分享一个公众号h5裂变吸粉源码工具

    这次我是分享我本人制作的一个恶搞程序,说白了就是一个公众号裂变吸粉工具,市面上有很多引流方法,例如最常见的就是色流,哈哈,今天我跟大家分享的方法是有趣的,好玩的,恶搞的.这个程序上线一天已经收获了61 ...

  9. github/gitlab同时管理多个ssh key

    之前一直用github,但是github有一个不好的地方,要是创建私有的项目的话需要付费,而gitlab上则可以免费创建管理私有的项目.由于最近想把自己论文的一些东西整理一下,很多东西还是不方便公开, ...

  10. git [command line] fatal: Authentication failed for

    fatal: Authentication failed for https://www.jianshu.com/p/8a7f257e07b8 git.exe fetch -v --progress ...