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语法。

posted @ 2019-01-13 22:58 libingql 阅读(...) 评论(...) 编辑 收藏