• 將semantic-ui-react應用到react中，需要注意

import { Table, Menu, Icon, Popup, Button, Header, Input } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';

npm i --save-dev semantic-ui-react

npm install semantic-ui-css --save

引入到react檔案後，在安裝時，需要分別安裝如上兩個元件

• Rounter實現連結間的跳轉

在src資料夾下面，建立一個資料夾home，下面建立一個Home.js

/**
 * Created by mapbar_front on 2018/3/18.
 */
import React,{ Component} from 'react';

export default class Home extends Component{
    render(){
        return (
            <div>
                <h1>主頁</h1>
            </div>
        )
    }
}

在src資料夾下面，建立一個資料夾about，下面建立一個About.js

/**
 * Created by mapbar_front on 2018/3/18.
 */
import React,{ Component} from 'react';

export default class About extends Component{
    render(){
        return (
            <div>
                <h1>關於</h1>
            </div>
        )
    }
}

然後在App.js中

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import Home from './home/Home';
import About from './about/About';
import '../styles/App.css';

class App extends Component {
  render() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to='/'>首頁</Link></li>
                    <li><Link to='/about'>關於</Link></li>
                </ul>
                <hr/>
                <Route exact path="/" component={About} />
                <Route path="/about" component={Home} />
            </div>
        </Router>
    );
  }
}

export default App;
 

• 實現點選按鈕，跳轉到另外一個頁面

首先，新增一個按鈕

<Button content='View Detail' icon='right arrow' labelPosition='right' size='mini' onClick={this.gotoDetailPage.bind(this)} />

然後編輯點選事件

    gotoDetailPage(){
        window.location.href="/UserStatus"
    }

• 實現點選退出按鈕，退出登入賬號，跳轉到登入頁面

import React, { Component } from "react";
import "./App.css";
import aws_exports from "../aws-exports";
import { withAuthenticator } from "aws-amplify-react";
import Amplify, { API, graphqlOperation ,Auth} from "aws-amplify";
import { Menu, Image, Dropdown, Divider } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
Amplify.configure(aws_exports);
class App extends Component {
  async onLogoutClick(){
    try {
      await Auth.signOut();
      window.location.reload();
    } catch (e) {
      alert("SignOut error: " + e);
    }
  }

  render() {
    return (
      <div className="App">
        <Menu fixed="top">
          <Menu.Menu position="right">
            <Dropdown text="Alisa" pointing className="link item">
              <Dropdown.Menu>
                <Dropdown.Item
                  onClick={this.onLogoutClick.bind(this)}
                >
                  Log Out
                </Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </Menu.Menu>
        </Menu>
      </div>
    );
  }
}

export default withAuthenticator(App, true);

• 父頁面點選view more之後，跳出彈窗，檢視當前父頁面的詳細內容

如下程式碼所示，通過map遍歷，定義了order，列印order發現，它是{裡面{內容}}，所以通過<OrderDetail order={{order}}/>，將order傳給子元件OrderDetail.js

            <Table.Body>
                {
                    this.props.patientStatus && this.props.patientStatus.hasOwnProperty('orders') && this.props.patientStatus.orders.map((order, i) => {
                        console.log(order)
                        let tableRow = (
                            <Table.Row key={'orders-item-' + i}>
                                <Table.Cell collapsing>
                                    <OrderDetail order={{order}}/>
                                </Table.Cell>
                            </Table.Row>
                        )
                        return tableRow
                    })
                }
            </Table.Body>

子元件OrderDetail.js，在render(){後面，定義ordertail，將order值傳遞給ordertail

let ordertail = this.props.order ? this.props.order : {}

然後通過{ordertail.order.status}進行引用

<Table.Cell>{ordertail.order.status}</Table.Cell>

• 當需要判斷兩個既有空元素，null，又有空格，又有undefined的陣列中的值，可以現在開頭定義

import _ from 'lodash'

然後在需要判斷的地方加上_.isEmpty(元素)

if (_.isEmpty(a) && !_.isEmpty(b))

• 例如將類似2018-11-19T10:39:01的時間轉化成毫秒，然後用當前時間減去這個時間，判斷是多少天之前

首先，利用new Date().getTime()將該時間轉化成標準時間，然後獲取毫秒

new Date(2018-11-19T10:39:01).getTime()

然後獲取當前時間的毫秒

var myDate = new Date();
var mytime = myDate.getTime()