React（03）：React中的JSX语法
前言
React（02）：React基础语法及核心的概念
这一篇来讲React很重要的部分：react中使用JSX语法
正文
什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）可以将HTML语言直接写在JavaScript语言之中，不加任何引号，它允许HTML与JavaScript的混写。这就是JSX的语法。
一、使用JSX语法特点及注意事项
-
当 编译引擎在编译JSX代码的时候，如果遇到了
<那么就把它当作 HTML代码去编译，如果遇到了{}就把 花括号内部的代码当作 普通JS代码去编译； -
jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；
-
在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到
{ }中 -
在 jsx 中 写注释：推荐使用
{ /* 这是注释 */ } -
使用 camelCase（小驼峰命名）来定义属性的名称：需要使用
className来替代class；htmlFor替换label的for属性；tabindex则变为tabIndex; -
在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
-
在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！
-
JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
-
React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS(跨站脚本攻击)
-
Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。
-
因为React独有的JSX语法跟JavaScript不兼容。如果在普通的html里面要写jsx语法，凡是使用JSX的地方，都要加上type=“text/jsx”。
二、react中使用JSX语法
2.1 JSX语法使用
首先引入 babel 插件转译器
<script src="/js/babel.min.js"></script>
- 创建虚拟dom元素,再渲染；
const arrStr = ['zs','asd','fff']
const list =[]
arrStr.forEach(item=>{
const name = <p>{item}</p>
list.push(name)
})
ReactDOM.render(list,document.getElementById('app'))
- 直接在内部循环渲染虚拟dom
const arrStr = ['zs','asd','fff']
ReactDOM.render(
<div>
{arrStr.map(item=><h3 key={item}>{item}</h3>)}
</div>,
document.getElementById('app')
)
- 渲染虚拟dom对象数组的形式
const arrStr2 = [{id:1,name:'小明',age:18},{id:2,name:'小红',age:20},]
ReactDOM.render(
<div>
{arrStr2.map(item => {
return <h3 key={item.id}>{item.name}+++{item.age}</h3>
})}
</div>,
document.getElementById('app')
)
- 使用JavaScript表达式
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，三元表达式 或 formatName(user) 都是有效的 JavaScript 表达式。
let title = '这是标题'
let isShowTitle = false
const arrStr2 = [{id:1,name:'小明',age:18},{id:2,name:'小红',age:20},]
function formatName(user) {
return user.name + '今年 ' + user.age;
}
ReactDOM.render(
<div>
<h1>{ isShowTitle ? title:' 不用展示标题' }</h1>
<h1>{2 + 2}</h1>
<h1>{formatName(arrStr2[0])}</h1>
</div>,
document.getElementById('app')
)
- JSX使用es6扩展运算符
const attrs = {
href:'./demo01.html',
target:'_blank'
}
ReactDOM.render(
<div>
<a href="./demo01.html" target="_blank">链接去往demo1</a> <br/>
<a {...attrs}>链接去往demo1,方法二</a>
</div>,
document.getElementById('app')
)
2.2. demo2-html中使用 jsx 语法案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/react.development.js">script>
<script src="js/react-dom.development.js">script>
<script src="js/babel.min.js">script>
<title>demo2title>
<style>
.container {
background: pink;
}
style>
head>
<body>
<div id="app">div>
<script type="text/babel">
const arrStr = ['小明', '小红', '小刚',]
const arrStr2 = [{ id: 1, name: '小明', age: 18 }, { id: 2, name: '小红', age: 20 },]
let list = arrStr.map((item, index) => {
return <li key={index}>{item}</li>
})
let title = '这是标题'
let isShowTitle = false
function formatName(user) {
return user.name + '今年 ' + user.age;
}
const attrs = {
href: './demo01.html',
target: '_blank'
}
ReactDOM.render(
<div className="container">
{
/*注释： 创建虚拟dom元素,在渲染 */
list
}
<hr />
{arrStr.map(item => <h3 key={item}>{item}</h3>)}
<hr />
{arrStr2.map(item => {
return <h3 key={item.id}>{item.name}+++{item.age}</h3>
})}
<hr />
{arrStr2.map(item => {
return <label htmlFor={item.name} key={item.id}>{item.name}</label>
})}
<hr />
<h1>{isShowTitle ? title : '不用展示标题'}</h1>
<h1>{2 + 2}</h1>
<h1>{formatName(arrStr2[0])}</h1>
<hr />
<a href="./demo01.html" target="_blank">链接去往demo1</a> <br />
<a {...attrs}>链接去往demo1,方法二</a>
</div>,
document.getElementById('app')
)
script>
body>
html>
结语
以上就是React中的JSX语法，接下来正式开始React中组件化
附：react相关博文
React（04）：React中的组件化
其他博文请移步React专栏
如果本文对你有帮助的话，请不要忘记给我点赞打call哦~o(￣▽￣)ｄo
有问题留言 over~