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. SpringMvc的基本流程

    1.流程图 2.特别说明 1)SpringMvc有6大组件(MVC各一个,再加3个运用策略模式的组件) 2)MVC对应的组件分别是(Handler.View.DisapatchServelet) 3) ...

  2. Docker CE 各安装方法

    1.Docker CE 镜像源站 使用官方安装脚本自动安装 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 2.U ...

  3. Sass map详解

    作为一个CSS预处理器,Sass正受到越来越多的青睐,诸如Github.Codepen.CSS-Tricks.SitePoint.w3cplus等网站采用Sass组织.管理CSS文件,Sass正在逐渐 ...

  4. PHP7 学习笔记(十五)Repository 模式实现业务逻辑和数据访问的分离

    参考: 1.http://laravelacademy.org/post/3063.html

  5. 面向对象(Object Orientation Programming)

    Three characteristic of object orientation: Encapsulation: capturing data and keeping it safely and ...

  6. MobSF移动渗透测试框架

    1.https://github.com/MobSF/Mobile-Security-Framework-MobSF/wiki/1.-Documentation 2.http://www.freebu ...

  7. Java中的按位运算

    博客大搬家. 一.位运算符简介: 1.按位与&.如果两个整形数据 a.b 对应位都是1,则结果位才为1,否则为0,(int 最大值0x7fffffff ): int a = 0x7ffffff ...

  8. keras中的重要函数

    https://blog.csdn.net/u012969412/article/details/70882296

  9. tab选项卡在鼠标经过时实现切换延迟

    偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要 ...

  10. 第20月第4天 pycharm utf-8

    1.运行python %run a.py 运行 https://blog.csdn.net/little_bobo/article/details/78982412 2.UnicodeDecodeEr ...