React笔记：React基础（2）
1. JSX
JSX是一种拥有描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。
1.1 基本语法
JSX可以嵌套多个HTML标签，可以使用大部分符号HTML规范的属性。
TodoList.js：
import React, { Component } from 'react'
class TodoList extends Component {
render(){
return (
<ul>
<li>To Do</li>
<li>In Progress</li>
<li>Done</li>
</ul>
);
}
}
export default TodoList;
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './components/TodoList'
ReactDOM.render(<TodoList />, document.getElementById('root'));
index.html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
JSX中的HTML标签属性绝大多数与HTML规范一致，但是class和for这两个属性在JSX中需要写为className何htmlFor。
class和for是JavaScript中的保留字。
1.2 标签类型
在JSX语法中，使用的标签类型有两种：DOM类型标签和React组件类型标签。
使用DOM类型标签时，标签的首字母必须小写。
使用React类型标签时，组件名称的首字母必须大写。
React通过首字母的大小写判断渲染的是DOM类型标签，还是React组件类型标签。
// DOM类型标签 const element = <h1>Hello World</h1>;
// React组件类型标签 const element = <TodoList />;
// 嵌套使用
const element = {
<div>
<TodoList />
</div>
}
1.3 JavaScript表达式
在JSX中使用JavaScript表达式需要将表达式用大括号 {} 包括起来。
在JSX中使用表达式的两个场景：（1）通过表达式给标签属性赋值（2）通过表达式定义组件。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul>
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
1.4 条件判断
JavaScript表达式要求必须有返回值，因此无法直接使用if else语句，解决方法：
◊ 使用三元运算符
◊ 设置变量并在属性中引用
◊ 将逻辑转化到函数中
◊ 使用&&运算符
1.4.1 三元运算符
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
render() {
return (
<div className={ this.state.isComplete ? 'is-complete' : '' }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.2 使用变量
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
getIsComplete() {
return this.state.isComplete ? 'is-complete' : '';
}
render() {
let isComplete = this.getIsComplete();
return (
<div className={ isComplete }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.3 使用函数
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
getIsComplete() {
return this.state.isComplete ? 'is-complete' : '';
}
render() {
return (
<div className={ this.getIsComplete() }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.4 使用逻辑与（&&）运算符
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
render() {
return (
<div className={ this.state.isComplete && 'is-complete' }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.5 标签属性
（1）当JSX标签属性是DOM类型的标签时，JSX支持对于DOM标签的属性。
JSX中的内联样式通过style属性来定义，但属性值必须为对象，且对象中的属性名需要使用camelCase（驼峰命名法）。
例：font-size改为fontSize。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul style={{color: 'red', fontSize: '14px'}}>
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
（2）当JSX标签是React组件类型时，可以任意自定义标签的属性名。
HelloWorld.js
import React, { Component } from "react"
class HelloWorld extends Component {
render() {
return (
<div> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld'
ReactDOM.render(<HelloWorld name='World' />, document.getElementById('root'));
1.6 注释
JSX中，在标签子节点内的注释写在{}中。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul style={{color: 'red', fontSize: '14px'}}>
{/* 注释 */}
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
JSX语法只是 React.createElement(component, props, ...children)的语法糖，所有的JSX语法最终都会被转换成该方法调用。
在项目智勇首选使用JSX语法。
浙公网安备 33010602011771号