用React刻自己的投资Dashboard Day27 - 台股技术面刻板

tags: `2021铁人赛` `React`

一般来说刻板前应该会需要画个wireframe会比较清楚一些，不过时间有限，就在纸上画一画就先开始写code吧，先达成功能目的，之後再来修版型，下面就开始写罗。

新增台股技术面Component

首先在components资料夹内新增TaiwanStockTA资料夹，相对路径为src\components\TaiwanStockTA，结构如下：

简单的将台股技术面这一页分解成两块，分别是标题列(Title)及K线图页面(KBarChart)，另外也将历史资料制作成dummyData.json作为call api之前测试资料图像化使用。

修改导览列及选单列表

因为多了一个页面，因此在导览列及手机版面的选单列表也要同时新增路径，让使用者可以进到这个页面。

修改导览列
src\components\Navbar\Navbar.js

import React, { useState } from 'react';
import styles from './Navbar.module.css';
import Navbar from 'react-bootstrap/Navbar';
import svgIcon from './navbaricon.svg';
import Nav from 'react-bootstrap/Nav';
import Burger from '../../UI/Burger/Burger';
import Menu from '../../UI/Menu/Menu';

const Topbar = (props) => {
  const [open, setOpen] = useState(false);

  return (
    <Navbar className={styles.navbar}>
      <Navbar.Brand className={styles.title} href="/">
        <img
          alt=""
          src={svgIcon}
          width="30"
          height="30"
          className="d-inline-block align-top"
        />{' '}Invsetment Dashboard
      </Navbar.Brand>
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="me-auto" activeKey={props.path}>
          <Nav.Link href="/" className={styles.link}><p>首页</p></Nav.Link>
          <Nav.Link href="/macroeconomics" className={styles.link}><p>总体经济</p></Nav.Link>
          <Nav.Link href="/taiwanstockta" className={styles.link}><p>台股技术面</p></Nav.Link>
        </Nav>
      </Navbar.Collapse>
      <Burger open={open} setOpen={setOpen} />
      <Menu open={open} setOpen={setOpen} />
    </Navbar>
  );
};

export default Topbar;

修改选单列表
src\UI\Menu\Menu.js

import React from 'react';
import { bool } from 'prop-types';
import { StyledMenu } from './Menu.styled';

const Menu = ({ open }) => {
  return (
    <StyledMenu open={open}>
      <a href="/">
        首页
      </a>
      <a href="/macroeconomics">
        总体经济
      </a>
      <a href="/taiwanstockta">
        台股技术面
      </a>
    </StyledMenu>
  )
}

Menu.propTypes = {
  open: bool.isRequired,
}

export default Menu;

修改路由档

要透过相对路径要对应到正确的页面，就需要透过路由档的设定，因此修改App-route.js这个档。

src\App-route.js

import Home from "./components/Home/index";
import Macroeconomics from "./components/Macroeconomics/index";
import TaiwanStockTA from './components/TaiwanStockTA/index';

//
const routes = [
  {
    key: "route-home",
    name: "home",
    path: "/",
    withHeader: true,
    withFooter: true,
    public: true, // 若在维护开发中请设定 false
    authority: null,
    component: Home,
  },
  {
    key: "route-macroeconomics",
    name: "macroeconomics",
    path: "/macroeconomics",
    withHeader: true,
    withFooter: true,
    public: true, // 若在维护开发中请设定 false
    authority: null,
    component: Macroeconomics,
  },
  {
    key: "route-taiwanstockta",
    name: "taiwanstockta",
    path: "/taiwanstockta",
    withHeader: true,
    withFooter: true,
    public: true, // 若在维护开发中请设定 false
    authority: null,
    component: TaiwanStockTA,
  }
];

export default routes;