react实操

将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()

猜你喜欢