03.jsx语法中的注意事项

最新推荐文章于 2025-05-23 20:30:33 发布

原创最新推荐文章于 2025-05-23 20:30:33 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个具体的React应用实例，展示了如何使用JSX语法来创建和渲染组件。其中包括了基本的元素创建、条件渲染以及列表的展示等核心概念。

// 1.导包
import React from 'react'
import ReactDOM from 'react-dom'

// 2.创建虚拟DOM元素
// const mydiv = React.createElement('div',{id:'mydiv',title:'div aaa'},'这是一个div元素')



let a = 10
let str = '你好中国'
let boo = false
let title = '999'
const h1 = <h1>红红火火</h1>
// const arr = [
//   <h2>这是h2</h2>,
//   <h3>这是h3</h3>
// ]
const arrStr = [
  '张飞',
  '刘备',
  '关羽',
  '诸葛亮'
]
//定义一个空数组，将来用来存放名称标签 方案1
const nameArr = []
arrStr.forEach(item => {
  const temp = <h5 key={item }>{item}</h5>
  nameArr.push(temp)
})

// 数组map方法，必须写return



// 3.调用render函数渲染
// 什么情况下需要使用{}呢？当我们需要子啊JSX控制区域内，写JS表达式了，则需要把JS代码写到{}中
ReactDOM.render(<div>
  {a + 2}
  {str}
  {boo ? '条件为真' : '条件为假'}
  <p title={title}>这是一个p标签</p>
  {h1}
  {/* {arr} */}
  {nameArr}
  {
    arrStr.map(item => <h3 key={item}>{item}</h3>)
  }
</div>, document.getElementById('app'))