JSX是什么
JSX 全称 JavaScript XML,是React 定义的一种类似于 XML 的 JS 扩展语法:JS + XML
本质是 React.createElement(component, props, ...children) 方法的语法糖。 用于简化创建虚拟 DOM,
写法:var ele = <h1>Hello JSX!</h1>。
注意,它不是字符串,也不是 HTML/XML 标签。它最终产生的是一个 JS 对象。
维基百科词条
JSX是一种JavaScript的语法扩展(eXtension),
也在很多地方称之为JavaScript XML,因为看起就是一段XML语法;
为什么React选择了JSX
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
比如UI中需要展示数据状态,在某些状态发生改变时,又需要改变UI;
我们只需要知道,JSX其实是嵌入到JavaScript中的一种结构语法
JSX的书写规范
- JSX的顶层只能有一个根元素,所以我们很多时候会在外层包裹一个div原生(或者使用后面我们学习的Fragment)
- 为了方便阅读,我们通常在jsx的外层包裹一个小括号(),这样可以方便阅读,并且jsx可以进行换行书写;
- JSX中的标签可以是单标签,也可以是双标签; 注意:如果是单标签,必须以/>结尾
- 创建虚拟DOM时,不要写引号;
- 标签中要混入js表达式,要是用{}
- 标签中样式的类名要用className指定
- 标签中的内联样式要用style={{color:‘white’}},注意属性名转为小驼峰
- 一定注意区分:【js语句(代码)】与【js表达式】
关于标签首字母
1.若首字母小写,那么React就会去寻找与之同名的html标签
若找见,直接转为html同名元素
若未找见,报错
2. 若首字母大写,那么React就会去寻找与之同名的组件
若找见,那么就是用组件
若未找见,报错
jsx中注释的写法
// 需要大括号包裹双斜杠星星**
{/* 我是一段注释 */}
JSX的使用
JSX嵌入变量
情况一:当变量是Number、String、Array类型时,可以直接显示
情况二:当变量是null、undefined、Boolean类型时,内容为空;
如果希望可以显示null、undefined、Boolean,那么需要转成字符串;
转换的方式有很多,比如toString方法、和空字符串拼接,String(变量)等方式;
情况三:对象类型不能作为子元素(not valid as a React child)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
// 1.在{}中可以正常显示显示的内容
name: "why", // String
age: 18, // Number
names: ["abc", "cba", "nba"], // Array
// 2.在{}中不能显示(忽略)
test1: null, // null
test2: undefined, // undefined
test3: true, // Boolean
flag: true,
// 3.对象不能作为jsx的子类
friend: {
name: "kobe",
age: 40,
},
};
}
render() {
return (
<div>
{/* 1.本身就显示的*/}
<h2>{this.state.name}</h2>
<h2>{this.state.age}</h2>
<h2>{this.state.names}</h2>
{/* 2.本身就不能显示的*/}
<h2>{this.state.test1}</h2>
<h2>{this.state.test2}</h2>
<h2>{this.state.test3}</h2>
{/* 3.将不能显示的转变成可以显示的*/}
<h2>{this.state.test1 + ""}</h2>
<h2>{this.state.test2 + ""}</h2>
<h2>{this.state.test3.toString()}</h2>
<h2>{this.state.flag ? "你好啊" : null}</h2>
{/* 4.对象不能作为jsx的子类--报错*/}
<h2>{this.state.friend}</h2>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>
JSX嵌入表达式
运算表达式
三元运算符
执行一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
firstname: "kobe",
lastname: "bryant",
isLogin: false,
};
}
render() {
// 对象的解构
const { firstname, lastname, isLogin } = this.state;
return (
<div>
{/*1.jsx里面可以放入各种表达式,这里只是举例几个 */}
{/*1.运算符表达式*/}
<h2>{firstname + " " + lastname}</h2>
<h2>{20 * 50}</h2>
{/*2.三元表达式*/}
<h2>{isLogin ? "欢迎回来~" : "请先登录~"}</h2>
{/*3.进行函数调用*/}
<h2>{this.getFullName()}</h2>
</div>
);
}
getFullName() {
return this.state.firstname + " " + this.state.lastname;
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>