react学习——jsx语法_jsx中return{}as menuitem语法

jsx语法

JavaScript XML 的简称
特别的地方是：

• 允许在 JS 文件中写 HTML代码
• 也可以在 HTML 中写 JS

jsx中的规则

快速生成
rcc 快速生成一个类组件 react create class
rfc 快速生成一个函数式组件 react function component

1.App.jsx的 return 中必须有一个根元素

• 类组件的写法

// 1-导入react中的默认组件，并命名为React；
// 引入react中的成员组件Component，可以用{}引入多个成员组件
import React,{Component, Fragment} from "react"
// 2-创建一个类组件
class App extends Component{
	// 3-类组件中需要一个render方法：render 是 react里的生命周期方法，类似于 before Mount
	render(){
		// 4-render还需要一个 return，且return 不能是 什么都没有
		// return 123 //Number
		// return "123" //String
	    // return true //Boolean 不渲染任何内容
	    // return undefined //报错
	    // return Symbol() //不渲染任何内容
		
		// return 后接的东西会 在界面上显示出来
		
		// 要返回多个标签的时候，必须要有一个根元素
		// Fragment相当于vue中的 template
		return <Fragment>
			<h1>你好！</h1>
			<h1>我也好！</h1>
		</Fragment>
	}
}
// 5-导出
export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.表达式

• 渲染内容 Vue中是{{}}
• react中是 {}

import React, { Component } from 'react'
// 表达式
let bool
let arr = [1,2,3]
let obj = {'name':'
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/139011