React筆記：React基礎（2）

libingql發表於2019-01-13

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;