Day27 React-实作todoList(二)建立子元件

Header元件

第一个元件先从 Header.js 开始
Header要负责

• 显示标题
• 待办事项 和 完成事项 NavLink连结显示
• Redirect重新导向首页为待办事项

记得安装react-router-dom，并且要在index.js用标签把根元件包住，
才能用router唷！

//安装router套件
yarn add react-router-dom

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(

//包住根元件让整个专案元件可以使用router
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

reportWebVitals();

Header的程序码

//components/Header.js

import React from 'react';
import { NavLink, Redirect } from 'react-router-dom';

function Header() {

    return (
        <div className="header flex-between">
            <h1>TodoList</h1>
            <ul className="flex nav gap">

		//设置NavLink连结切换路由
                <NavLink to="/undo" >待办项目</NavLink>
                <NavLink to="/done" >完成项目</NavLink>

		//除了NavLink连结外，其他url都导向路径/undo(待办项目)
                <Redirect to="/undo" />
            </ul>
        </div>
    );
}

export default Header;

App.scss档 - Header的scss样式

//Header样式
.header{
    margin-inline:auto ;
    padding-inline:20px ;
    margin-bottom: 30px;
    align-items: center;
    background-color: rgb(113, 95, 78);
    width: 700px;
    color: #fff;

   
    
    li{
        list-style: none;
        width: max-content;
        font-weight:bolder;
        cursor: pointer;
    }
    .nav{
        a{
            color: #fff;
            text-decoration: none;
            font-weight: normal;
        }
        .active{
            text-decoration:underline;
            font-weight: bolder;
        }
    }

}

下面是之後会用到的共用样式scss，可以写在App.js的最上面

//App.scss

//共用样式
.flex{
    display: flex;
}

.flex-between{
    display: flex;
    justify-content:space-between;
}

.to-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-10{
    gap:10px;
    justify-content: space-around;
}

 .gap{
        gap:20px;
        justify-content: space-around;
    }
//Header样式
//....

Button元件-重复利用的按钮

将Button设为一个元件，根据让Button根据props可以改变样式跟用途

Button.js

import React from 'react';

function Button(props) {

//根据传入props的type来判断按钮颜色
  const typeStyle = function () {
    if (!props.type) return 'rgb(113, 95, 78)'
    if (props.type === "detele") return 'red'
  }

  const style = {
    backgroundColor: typeStyle()
  }

  return (
    <div className="button">
//props的content为按钮上想显示的字
      <button style={style} >{props.content}</button>
    </div>
  );
}

export default Button;

Button元件的scss样式

//App.scss

//共用样式...

//Header样式...

//Button 样式
.button{
  button{
      width: max-content;
      padding-inline:20px ;
      padding-block:10px ;
      border-radius:5px;
      border: none;
      cursor: pointer;
      background-color: rgb(113, 95, 78);
      color: #fff;
      &:hover{
          opacity: 0.8;
      }
  }
}

List元件-事项显示区

这个元件会根据路由useLocation()判断pathname是'/undo'还是'/done'
分别显示 待办事项 和 完成事项 两种不同的内容，
在List.js中会增加事项的Item元件，并且使用回圈的方式将每条新增事项渲染出来。

import React from 'react';
import { useLocation } from 'react-router-dom';
import Button from './Button';


function List(prop) {

	
/*下篇会加入回圈渲然item的函式 */


    return (
        <div className="content-edit wrap">
            <div className="title">
               //预计放入显示此路由名称小标题和目前项目数量
            </div>
            <div className="item">
              //预计放入回圈渲染的item元件，显示项目
            </div>

        </div>
    );
}

export default List;

List元件的scss样式

//App.scss

//共用样式...

//Header样式...

//Button 样式...

//list 样式
.content-edit{
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.item-wrap{
    p{
        width: 600px;
    }
}

建立好後，我们便可以在App.js中引用使用它们，下一篇来看看在App上排好後的UI视觉效果。