React工作42:react中的jsx表达对象

简介: React工作42:react中的jsx表达对象

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

以下两种示例代码完全等效:

const element = (
       <h1 className="greeting">
         Hello, world!
       </h1>
     );    const element = React.createElement(
       'h1',
       {className: 'greeting'},
       'Hello, world!'
     );    // 注意:这是简化过的结构
     const element = {
       type: 'h1',
       props: {
         className: 'greeting',
         children: 'Hello, world!'
       }
     };

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。

相关文章
|
4月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
91 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
5月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
49 4
|
2月前
|
JavaScript 前端开发 容器
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
|
2月前
|
存储 前端开发
在React框架中,如何使用对象来管理组件的状态
在React中,组件状态通过`state`对象管理,利用`setState`方法更新状态。状态变化触发组件重新渲染,实现UI动态更新。对象结构清晰,便于复杂状态管理。
|
2月前
|
XML 前端开发 JavaScript
react之了解jsx
react之了解jsx
|
3月前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`&lt;h1&gt;Hello, world!&lt;/h1&gt;` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
2月前
|
存储 前端开发 JavaScript
react之jsx编译原理
react之jsx编译原理
|
3月前
|
XML 前端开发 JavaScript
React JSX
10月更文挑战第7天
18 2
|
4月前
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件,将其内容转化为JSON对象,并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程,并提供了一个封装函数,用于在发起请求前动态生成配置化的URL地址。
102 1
|
5月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作