1.jsx语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsx语法</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
.myBody {
background-color: aqua;
margin: 10px;
}
</style>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
</body>
<script type="text/babel">
const myId = 'tiTle'
const myContent = 'HeLLo,rEAcT'
// 使用jsx创建虚拟DOM
const vDom = (
<div>
<div className="myBody">
<h1 id={myId.toLocaleUpperCase()}>
<span style={{color: 'white', fontSzie: '30px'}}>{myContent.toLocaleUpperCase()}</span>
</h1>
</div>
<div className="myBody">
<h1 id={myId.toLocaleLowerCase()}>
<span>{myContent.toLocaleLowerCase()}</span>
</h1>
</div>
</div>
)
//react渲染
ReactDOM.render(vDom, document.getElementById("test"))
/*jsx语法规则
1.定义虚拟DOM时，不要用引号包裹，用引号写的是字符串
2.标签中写js表达式要用{}
3.样式的类名指定不要用class，要用className
4.内联样式要用style={{key:value}}的形式去写，外层大括号表示写的是js表达式，内层大括号表示是一个对象，"-"连接的样式名称要写成大驼峰的形式
5.只能有一个根标签，也就是说无论有多少个标签，最终都要被一个标签包裹着
6.所有标签必须闭合
7.小写字母开头的标签会解析为html标签，没有对应标签的话会报错；大写字母开头的回去找对应的组件进行渲染，没有对应组件的话会报错
*/
</script>
</html>
2.jsx中数组遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsx小练习之数组遍历</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
.myBody {
background-color: aqua;
margin: 10px;
}
</style>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
</body>
<script type="text/babel">
const arr = [1,3,5,7,9]
// 使用jsx创建虚拟DOM
const vDom = (
<div>
<h1>个位奇数</h1>
<ul>
{
arr.map((number, index) => {
return <li key={index}>{number}</li>
})
}
</ul>
</div>
)
//react渲染
ReactDOM.render(vDom, document.getElementById("test"))
/*
1. map(callbackFc)函数
结果：返回一个新的数组
参数：callbackFc，一个回调函数
函数可以携带三个参数(element, index, arr)
element：每一个数组元素，必须
index：索引，非必须
arr: 当前数组，非必须
2. jsx中{}只能写js表达式，不能写js语句，表达式就是有返回值的东西
3. jsx在遍历数组时，必须有key，key作为每一个元素的唯一标识是不能重复的
*/
</script>
</html>
标签：语法,arr,const,标签,js,React,数组,jsx From： https://www.cnblogs.com/jmsstudy/p/17591359.html