React筆記：React基礎（2）

時間 2019-11-05

標籤 react 筆記基礎欄目 React 简体版

原文原文鏈接

1. JSX

　　JSX是一種擁有描述UI的JavaScript擴展語法，React使用這種語法描述組件的UI。html

1.1 基本語法

　　JSX能夠嵌套多個HTML標籤，能夠使用大部分符號HTML規範的屬性。react

　　TodoList.js：dom

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：this

<!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。spa

　　class和for是JavaScript中的保留字。code

1.2 標籤類型

　　在JSX語法中，使用的標籤類型有兩種：DOM類型標籤和React組件類型標籤。component

　　使用DOM類型標籤時，標籤的首字母必須小寫。htm

　　使用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語法。

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。