React-渲染元素

刺骨的言语ヽ痛彻心扉 2023-07-03 07:28 40阅读 0赞

渲染 react 元素，首先要引入相关的包

// 导入核心包；用于创建 react 对象
    import React from 'react'
    // 用于将 react 对象渲染成 DOM
    import ReactDOM from 'react-dom'

#### 创建 react 元素 ####

语法：

React.createElement(type, [props], [...children])

参数：

*  `type`：元素的名称
 *  `props`：一个对象用于设置元素的属性；没有时置为 null
 *  `children`：元素中的内容（子元素）

该方法的返回值为新的 react 元素

// 接收返回的元素
    let el = React.createElement('div', {  id: 'app' }, 'hello react')

#### 渲染 ####

将创建的元素或组件渲染到指定容器中

语法：

ReactDOM.render(element, container[, callback])

参数：

*  `element`：需要渲染的 react对象 或 组件
 *  `container`：容器，要渲染到哪里（是一个原生 DOM 对象）
 *  `callback`：回调函数，会在组件被渲染或更新之后执行

注意：首次调用该方法时容器中的内容会被覆盖

ReactDOM.render(el, document.getElementById('root'))

示例：

// 导入
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 创建
    let liOne = React.createElement('li', null, '熊大')
    let liTwo = React.createElement('li', null, '熊二')
    let liThree = React.createElement('li', null, '翠花')
    
    let ul = React.createElement('ul', {  id: 'app' }, liOne, liThree)
    
    // 渲染
    ReactDOM.render(ul, document.getElementById('root'))

![在这里插入图片描述][20200204155032890.png]

[20200204155032890.png]: https://img-blog.csdnimg.cn/20200204155032890.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 React-渲染元素

渲染 react 元素，首先要引入相关的包 // 导入核心包；用于创建 react 对象 import React from 'react' // 用

刺骨的言语ヽ痛彻心扉/ 2023年07月03日 07:28/ 0 赞/ 41 阅读

相关 react元素渲染

一，元素的渲染首先我们在一个 HTML 页面中添加一个 id=“example” 的div <div id="example"></div> 在此 div 中

悠悠/ 2023年06月25日 06:18/ 0 赞/ 31 阅读

相关 react 条件渲染

在 `React` 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 `React` 中的条件渲染和 `JavaScript`

朴灿烈づ我的快乐病毒、/ 2022年12月27日 01:42/ 0 赞/ 260 阅读

相关 react学习经验总结（元素渲染）

1.元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Hello, react!</h1>; 与浏览

た入场券/ 2022年12月25日 14:58/ 0 赞/ 178 阅读

相关 24【React基础-3】元素渲染

写在前面本文是【React基础】系列的第三篇文章，这篇文章中我们介绍一下在react中的"元素"这个概念，并且了解下它跟我们传统的浏览器DOM元素有什么不同。概述

迷南。/ 2022年12月17日 14:57/ 0 赞/ 176 阅读

相关 React学习之元素渲染

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

爱被打了一巴掌/ 2022年11月29日 13:29/ 0 赞/ 228 阅读

相关 React 源码学习（一）：HTML 元素渲染

> 阅读源码成了今年的学习目标之一，在选择 Vue 和 React 之间，我想先阅读 React 。在考虑到读哪个版本的时候，我想先接触到源码早期的思想可能会更轻松一些，最终

桃扇骨/ 2022年04月27日 22:30/ 0 赞/ 276 阅读

相关 React之元素渲染

元素渲染元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Hello, world!</h1>;

Myth丶恋晨/ 2022年04月16日 03:44/ 0 赞/ 243 阅读

相关 React渲染原理

渲染原理渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象 React元素：React Element，通过React.createElement创建

今天药忘吃喽~/ 2021年08月14日 01:47/ 0 赞/ 507 阅读

相关 react 渲染 hello React

react为一套为视图准备的js框架引入四个文件 <script src="js/libs/browser.min.js"></

╰+哭是因爲堅強的太久メ/ 2021年07月24日 15:47/ 0 赞/ 541 阅读