jsx是什么?
1.jsx是一种JavaScript的语法扩展(eXtension)，也在很多地方称为JavaScript XML。
2.它用于描述我们的UI界面，并且其完全可以和JavaScript融合使用。
3.它不同于Vue的模块语法，你不需要专门学习模块语法中的一些指令。jsx中的注释：
{/*要注释的内容*/}
-
jsx嵌入变量
情况一：当变量是Number、String、Array类型时，可以直接显示；
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"> //这里type="text/babel"不能省略，否则无法使用jsx
class App extends React.Component{
constructor(props){
super(props);
this.state = {
//1.在{}中可以正常显示显示的内容
name: "mike", //string
age: 18, //number
names: ["cba","nba","wba"], //Array
//2.在{}中不能显示(忽略)
test1: null,
test2: undefined,
test3: true,
flag: false
}
}
render(){
return (
<div>
<h2>{this.state.name}</h2> //显示mike
<h2>{this.state.age}</h2> //显示18
<h2>{this.state.names}</h2> //显示cbanbawba
<h2>{this.state.test1}</h2> //不显示
<h2>{this.state.test2}</h2> //不显示
<h2>{this.state.test3.toString()}</h2> //显示true
<h2>{this.state.flag + ''}</h2> //显示false
<h2>{this.state.flag && "good"}</h2> //不显示
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("app"));
</script>
</body>
- jsx嵌入表达式
运算表达式、三元运算符、执行一个函数
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"> //这里type="text/babel"不能省略，否则无法使用jsx
class App extends React.Component{
constructor(props){
super(props);
this.state = {
firstname: "kobe",
lastname: "bryant",
isLogin: true
}
}
render(){
const {firstname,lastname,isLogin} = this.state;
return (
<div>
{/*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>
- jsx本质
jsx只是React.createElement(component,props,children)函数的语法糖。
