React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容。

在React中构建 Element 有两种方式:

1、JSX的方式,JSX不是React的必用技术,但它可以用来产生一个 React “element”.

const element = (
<h1 className="greeting">
Hello, world!
</h1>
);

2、使用React.createElement方法

方法声明:

React.createElement(
type, //type可以是html的tag标签,例如'div'或'span',也可以是React.Component的类,或者React fragment type
[props
[...children]
)

示例 :

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

上述1和2的方式是等价的。

下面再介绍一种简写形式:

const e = React.createElement; //先将React.createElement赋给变量e,这样e就变成了React.createElement的简写了
const element = e( 'h1', {className:'greeting'}, 'Hello , world' );

要呈现一个React element到一个root DOM节点中,需要通过调用 ReactDOM.render()方法在页面中进行呈现,下面是一个完整的示例:

import React from 'react'
import ReactDOM from 'react-dom' class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
} ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('root')
);

在上述代码中可看到React.Component组件的render()方法实际返回的就是一个React的Element

React的Element的创建和render的更多相关文章

  1. React源码解析——创建更新过程

    一.ReactDOM.render 创建ReactRoot,并且根据情况调用root.legacy_renderSubtreeIntoContainer或者root.render,前者是遗留的 API ...

  2. react native组件的创建

    react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...

  3. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  4. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  5. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  6. [React Testing] Element types with Shallow Rendering

    When you render a component with the Shallow Renderer, you have access to the underlying object. We ...

  7. React.js入门笔记 创建hello world 的6种方式

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...

  8. React基础篇 (1)-- render&components

    render 基础用法 //1.创建虚拟DOM元素对象 var vDom=<h1>hello wold!</h1> //2.渲染 ReactDOM.render(vDom,do ...

  9. 从零学React Native之01创建第一个程序

    本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Nat ...

随机推荐

  1. 安装pycrypto2.6.1报错

    C:\Users\xxx\Downloads\pycrypto-2.6.1\pycrypto-2.6.1>python setup.py install running install runn ...

  2. servlet模拟SpringMVC

    1. web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&q ...

  3. OS + Linux nmon / nmon analyser / nmon_analyser_v52_1.zip

    s nmon_analyser_v52_1.zip https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/Pow ...

  4. springboot下整合各种配置文件

    本博是在springboot下整合其他中间件,比如,mq,redis,durid,日志...等等  以后遇到再更.springboot真是太便捷了,让我们赶紧涌入到springboot的怀抱吧. ap ...

  5. 利用css3给座右铭设置漂亮的渐变色

    .footer-container .footer-content p .motto { font-weight: bolder; -webkit-background-clip: text; -we ...

  6. SpringSecurity3Demo【原】

    oschina git地址: https://gitee.com/KingBoBo/SpringSecurity3Demo.git

  7. Java同步注解:@ThreadSafe、@Immutable、@NotThreadSafe、@GuardedBy

    Java并发编程中,用到了一些专门为并发编程准备的 Annotation.主要包括三类: <dependency> <groupId>net.jcip</groupId& ...

  8. pyqt5模块介绍

    python各种库介绍  https://wiki.python.org/moin/GuiProgramming PyQt5.QtWidgets     包含控件 PyQt5.QtGui      图 ...

  9. -如何存储并定时更新access_token

    来源:https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token ...

  10. 用Nodejs连接MySQL

    转载,原地址:http://blog.fens.me/nodejs-mysql-intro/ 前言 MySQL是一款常用的开源数据库产品,通常也是免费数据库的首选.查了一下NPM列表,发现Nodejs ...