1、认识JSX
JSX是一种JavaScript的语法扩展，可以用于描述UI界面，可以与JavaScript融合在一起使用
JSX的语法：const element = <h2>Hello World</h2>
在 <script type="text/babel"> 时才可以这样写
2、为什么React选择JSX
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
（1）比如UI需要绑定事件（button、a原生等等）
（2）比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI
JSX的书写规范
1、JSX的顶层只能由一个根元素
2、通常在JSX的外层包裹一个小括号()，方便阅读，并且JSX可以换行书写
3、JSX中的标签可以是单标签，也可以是双标签（如果是单标签必须是/结尾<App/>）
3、JSX的使用
（1） JSX中的注释
<div>{/*我是注释*/}</div>
（2）JSX嵌入变量
1.当变量是Number、String、Array类型时可以直接显示
2.当变量是null、undefined、Boolean类型时，内容为空
如果希望可以显示null、undefined、Boolean，那么需要转成字符串
转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等
3.对象类型不能作为子元素（not valid as a React child）
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
// 1、在{}可以正常显示的内容
name: "why", // String
age: 18, // Number
names: ["1", "2", "3"], // Array
// 2、在{}中不能显示（忽略）
test1: null,
test2: undefined,
test3: true,
flag: false,
// 对象不能作为JSX的子类
friend: {
name: "hel",
age: "21",
},
};
}
render() {
return (
<div>
<h2>{this.state.name}</h2>
<h2>{this.state.age}</h2>
<h2>{this.state.names}</h2>
<h2>{this.state.test1 + ""}</h2>
<h2>{String(this.state.test2)}</h2>
<h2>{this.state.test3.toString()}</h2>
<h2>{this.state.flag ? "显示" : null}</h2>
<h2>{this.state.friend.name}</h2>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>（3）JSX嵌入表达式
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: "姓",
lastName: "名",
isLogin: true,
};
}
render() {
const { firstName, lastName, isLogin } = this.state;
return (
<div>
{/*运算符表达式*/}
<h2>{firstName + lastName}</h2>
<h2>{20 * 30}</h2>
{/*三元表达式*/}
<h2>{isLogin ? "登录成功" : "请先登录"}</h2>
{/*函数调用*/}
<h2>{this.getFullName()}</h2>
</div>
);
}
getFullName() {
return this.state.firstName + this.state.lastName;
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>（4）JSX绑定属性
<div>
{/* 绑定普通属性 */}
<h2 title={this.state.title}>我是标题</h2>
{/* class与关键字重名 需要写成className */}
<div className="box">我是div</div>
{/* 动态绑定类 */}
<div className={"box " + (this.state.active ? "active" : "")}>
我也是div
</div>
{/* 绑定style */}
<div style={{ color: "red", fontSize: "50px" }}>
我div要绑定style
</div>
</div>（5）React事件绑定
如果DOM原生有一个监听事件
1、获取DOM原生，添加监听事件
2、在HTML原生，直接绑定onClick
this处理
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "hello",
counter: 100,
};
console.log(this);
{
/* bind会生成一个新的函数 重新赋值给btnClick */
}
this.btnClick = this.btnClick.bind(this);
}
render() {
return (
<div>
{/* 通过bind绑定this（显示绑定） */}
<button onClick={this.btnClick.bind(this)}>按钮</button>
{/* 定义函数时，使用箭头函数 */}
<button onClick={this.increment}>+1</button>
{/* 直接传入一个箭头函数，在箭头函数中调用需要执行的函数 */}
<button
onClick={() => {
this.decrement("a");
}}
>
-1
</button>
</div>
);
}
btnClick() {
console.log(this.state.msg);
}
// 箭头函数中不绑定this，会去找上一层作用域的this
// ES6中给对象增加属性： 叫做class fields语法
increment = () => {
console.log(this.state.counter);
};
decrement(a) {
console.log(this.state.counter, a);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>传递参数
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
movies: ["1", "2", "3"],
};
this.btnClick = this.btnClick.bind(this);
}
render() {
return (
<div>
<button onClick={this.btnClick}>按钮</button>
<ul>
{this.state.movies.map((item) => {
return <li onClick={(e) => this.liClick(e, item)}>{item}</li>;
})}
</ul>
</div>
);
}
btnClick(e) {
console.log("我点了", e, this.state.movies);
}
liClick(e, item) {
console.log(e, item);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>（6） React条件渲染
常见的条件渲染方式
1、条件判断语句（适合逻辑较多的情况）
2、三元运算符
3、&&（一个条件不成立，后面的条件都不会进行判断）
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLogin: true,
};
}
render() {
const { isLogin } = this.state;
const title = isLogin ? "block" : "none";
// if判断
let welcome = null;
let btnText = null;
if (isLogin) {
welcome = "登录成功";
btnText = "退出";
} else {
welcome = "请先登录";
btnText = "登录";
}
return (
<div>
<h2>{welcome}</h2>
<button>{btnText}</button>
<button onClick={(e) => this.loginClick()}>
{isLogin ? "退出" : "登录"}
</button>
<hr />
<h2>{isLogin && "哈哈哈"}</h2>
<hr />
<h2 style={{ display: title }}>实现v-show效果</h2>
<button onClick={(e) => this.loginClick()}>
{isLogin ? "消失" : "出现"}
</button>
</div>
);
}
loginClick() {
console.log("点");
this.setState({
isLogin: !this.state.isLogin,
});
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
