ToDo小应用（新手上手React）

React开发的上手todo小应用，笔者喜欢MaterialDesign的设计风格，所以内部组件使用了MaterialUI，同时动画过度效果使用了ReactSpring等。

ToDo整体由三部分组成

头部、左侧的抽屉菜单、以及内容部分

大致结构如下

import React from 'react';
import Header from "./components/head/head";
import ToDo from "./components/todo/todo";
import Menu from './components/menu/menu';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header title={'TODO'}/>
      <ToDo/>
      <Menu/>
    </div>
  );
}
//此处两种方式均可
// class App extends Component{
//   render(){
//   return (
//       <div className="App">
//           <Header title={"TODO"} />
//           <ToDo />
//           <Menu />
//       </div>
//   );
// }
export default App;

头部组件

样式使用flex布局，props传参title为标题的内容

import React, { Component } from 'react';
//使用flex布局布局头部样式
import './head.scss'
class Header extends Component{ 
    constructor (props) {
        super(props)
    }
    render(){
        return(
            <div className="header">
                <span>{this.props.title}</span>
            </div>
        )
    }
}
export default Header;

菜单组件

使用react-spring完成动画的过渡效果，使用useState来管理状态判断,调用handleClickOnTitle方法控制setShow切换菜单的展开和闭合以及菜单的图标切换

import React,{useState} from 'react';

import './menu.scss';

import MenuIcon from './menu.svg';

import CloseIcon from "./close.svg";

// 引入react-springD动画
import {useSpring,animated} from 'react-spring';

function Menu(){
    const [show,setShow] = useState(false);
    // 定义菜单动画
    const menuAnimate = useSpring({
        transform: `translateX(${show?0:-50}vw)`,
        duration:500
    })
    // 遮罩层动画
    const maskAnimate = useSpring({
        display:show?'block':'none',
        opacity:show?1:0,
        duration:300
    })
    // 切换显示菜单
    function handleClickOnTitle (data,event) {
        setShow(!show);
    }
    return (
       <div>
           <animated.div  className="menu" style={menuAnimate}>
                <div onClick={handleClickOnTitle} className="toggle">
                    <img src={show?CloseIcon:MenuIcon} alt="菜单"/>
                </div>
            </animated.div>
            <animated.div style={maskAnimate} className="menu_mask"></animated.div>
       </div>
    )
}
export default Menu;

内容组件

大致分为添加按钮，添加框，显示卡片

通过状态的判断来区分待办和已完成的卡片列表，具体分析大家可以查看源码，喜欢的同学们可以在公众号回复todo,查看链接和源码，欢迎star