React的Element的创建和render
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的更多相关文章
- React源码解析——创建更新过程
一.ReactDOM.render 创建ReactRoot,并且根据情况调用root.legacy_renderSubtreeIntoContainer或者root.render,前者是遗留的 API ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- [React Testing] Element types with Shallow Rendering
When you render a component with the Shallow Renderer, you have access to the underlying object. We ...
- React.js入门笔记 创建hello world 的6种方式
一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...
- React基础篇 (1)-- render&components
render 基础用法 //1.创建虚拟DOM元素对象 var vDom=<h1>hello wold!</h1> //2.渲染 ReactDOM.render(vDom,do ...
- 从零学React Native之01创建第一个程序
本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Nat ...
随机推荐
- 安装pycrypto2.6.1报错
C:\Users\xxx\Downloads\pycrypto-2.6.1\pycrypto-2.6.1>python setup.py install running install runn ...
- servlet模拟SpringMVC
1. web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&q ...
- 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 ...
- springboot下整合各种配置文件
本博是在springboot下整合其他中间件,比如,mq,redis,durid,日志...等等 以后遇到再更.springboot真是太便捷了,让我们赶紧涌入到springboot的怀抱吧. ap ...
- 利用css3给座右铭设置漂亮的渐变色
.footer-container .footer-content p .motto { font-weight: bolder; -webkit-background-clip: text; -we ...
- SpringSecurity3Demo【原】
oschina git地址: https://gitee.com/KingBoBo/SpringSecurity3Demo.git
- Java同步注解:@ThreadSafe、@Immutable、@NotThreadSafe、@GuardedBy
Java并发编程中,用到了一些专门为并发编程准备的 Annotation.主要包括三类: <dependency> <groupId>net.jcip</groupId& ...
- pyqt5模块介绍
python各种库介绍 https://wiki.python.org/moin/GuiProgramming PyQt5.QtWidgets 包含控件 PyQt5.QtGui 图 ...
- -如何存储并定时更新access_token
来源:https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token ...
- 用Nodejs连接MySQL
转载,原地址:http://blog.fens.me/nodejs-mysql-intro/ 前言 MySQL是一款常用的开源数据库产品,通常也是免费数据库的首选.查了一下NPM列表,发现Nodejs ...