JSX基础使用

2021-12-15 21:32:50 阅读：194 来源： 互联网

标签：react loading const name 基础语法使用 JSX

一、JSX基本使用

1.1 createElement()问题
1、繁琐不简洁
2、不直观、无法一眼看出结构
3、不优雅，用户体验感不爽

1.2 JSX简介
JSX: JavsScript XML
优势：声明式语法，更加直观、与HTML结构相似，学习成本低

1.3 使用步骤
1、使用JSX创建react元素

const title = <h1>hello JSX!!!</h1>

2、使用ReactDOM.render()方法渲染react元素到页面中

ReactDOM.render(title, root)

为什么在脚手架中可以使用JSX语法？
1、JSX不是标准的ECMAScript语法，他是ECMAScript的语法拓展。
2、需要使用babel编译处理后，才能在浏览器环境中使用。
3、create-react-app脚手架中已经默认有该配置，无需手动配置。
4、编译JSX语法包为： @babel/preset_react

1.4 注意点
1、React元素的属性命名使用驼峰命名法
2、特殊属性名： class --> className、for–> htmlFor、tabindex–> tabIndex
3、没有子节点的react元素可以使用/>结束
4、推荐使用（）包裹JSX,从而避免js中自动插入分号的陷阱。

二、JSX中使用javaScript表达式

2.1 嵌入JS表达式

数据存储在JS中
语法： { JavaScript表达式 }
注意: 语法中单大括号，不是双大括号 !

const name = 'JACK'
const dv = {
	<div>你好，我叫：{name}<div>
}

三、JSX的条件渲染

if/else
三元运算
逻辑与运算符

// if/else
let loading = false
const loadData = () => {
	if (loading) {
		return <div>loading...</div>
	}
	return <div>数据加载完成</div>
}
// 三元运算
const loadData = () => {
	return loading ? (<div>loading...</div>) : (<div>数据加载完成</div>)
} 
// 逻辑与运算
const loadData = () => {
	return loading && (<div>loading...</div>)
}


const title = () => {
	<h1>条件渲染： {loadData()}</h1>
}
ReactDOM.render(title, document.getElementById('root'))

四、JSX的列表渲染

如果要渲染数组，应该使用数组Map()方法

const songs = [
	{id: 1, name: 'qqq'},
	{id: 2, name: 'aaa'},
	{id: 3, name: 'bbb'},
]

const list = (
	<ul>
		{songs.map(item => <li key={item.id}>{item.name}</li>)}
	</ul>
)

五、JSX的样式处理

1、行内样式 — style

2、类名 — className(推荐)

import './css/index.css'

const list = (
<h1 className='title' style="{{ color: 'red' }}">JSX 样式处理<h1>
)

标签：react,loading,const,name,基础,语法,使用,JSX
来源： https://blog.csdn.net/qq_42550235/article/details/121960634