React知乎日报项目（四）

前置操作：
Personal.jsx：

import React from "react";
import {
    Link } from 'react-router-dom';
import {
    RightOutline } from 'antd-mobile-icons';
import styled from "styled-components";
import NavBarAgain from '../components/NavBarAgain';

/* 样式 */
const PersonalBox = styled.div`
    .baseInfo {
        box-sizing: border-box;
        margin: 40px 0;
        .pic {
            display: block;
            margin: 0 auto;
            width: 172px;
            height: 172px;
            border-radius: 50%;
        }
        .name {
            line-height: 100px;
            font-size: 36px;
            text-align: center;
            color: #000;
        }
    }
    .tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        height: 80px;
        line-height: 80px;
        font-size: 28px;
        color: #000;
        border-bottom: 2px solid #EEE;
    }
`;

const Personal = function Personal() {
   
    return <PersonalBox>
        <NavBarAgain title="个人中心" />
        <div className="baseInfo">
            <Link to='/update'>
                <img className="pic" src='xxx' alt="" />
                <p className="name">52lkk</p>
            </Link>
        </div>
        <div>
            <Link to='/store' className="tab">
                我的收藏
                <RightOutline />
            </Link>
            <div className="tab">
                退出登录
                <RightOutline />
            </div>
        </div>
    </PersonalBox>;
};
export default Personal

Store.jsx：

import React from "react";
import {
    SwipeAction } from 'antd-mobile';
import NavBarAgain from '../components/NavBarAgain';
import NewsItem from '../components/NewsItem';
import styled from "styled-components";
import SkeletonAgain from '../components/SkeletonAgain'

/* 样式 */
const StoreBox = styled.div`
    .box {
        padding:30px;
    }
`;

const Store = function Store() {
   
    return <StoreBox>
        <NavBarAgain title="我的收藏" />
        <div className="box">
            <SwipeAction rightActions={
   
                [{
   
                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                    onClick() {
    }
                }]} >
                <NewsItem info={
   ...}/>
            </SwipeAction>
            <SkeletonAgain></SkeletonAgain>
        </div>
    </StoreBox >;
};
export default Store

Update.jsx：

import React from "react";
import NavBarAgain from '../components/NavBarAgain';
import ButtonAgain from '../components/ButtonAgain';
import styled from "styled-components";
import {
    ImageUploader, Input } from 'antd-mobile';

/* 样式 */
const UpdateBox = styled.div`
    .formBox {
        padding: 30px;

        .item {
            display: flex;
            align-items: center;
            height: 110px;
            line-height: 110px;
            font-size: 28px;

            .label {
                width: 20%;
                text-align: center;
            }

            .input {
                width: 80%;
            }
        }
    }

    .submit {
        display: block;
        margin: 0 auto;
        width: 60%;
        height: 70px;
        font-size: 28px;
    }
`;

const Update = function Update() {
   
    return <UpdateBox>
        <NavBarAgain title="修改信息" />
        <div className="formBox">
            <div className="item">
                <div className="label">头像</div>
                <div className="input">
                    <ImageUploader />
                </div>
            </div>
            <div className="item">
                <div className="label">姓名</div>
                <div className="input">
                    <Input placeholder='请输入账号名称' />
                </div>
            </div>
            <ButtonAgain color='primary' className="submit">
                提交
            </ButtonAgain>
        </div>
    </UpdateBox>;
};
export default Update

Page404.jsx：

import React from "react";
import {
    ErrorBlock, Button } from 'antd-mobile';
import styled from "styled-components";

/* 样式处理 */
const Page404Box = styled.div`
    padding-top: 100px;
    font-size: 40px;

    .adm-error-block-image{
        height: 400px;
    }

    .adm-error-block-description,
    .adm-error-block-description-title{
        font-size: 28px;
    }

    .btn{
        margin-top: 50px;
        display: flex;
        justify-content: center;

        .adm-button{
            margin: 0 20px;
        }
    }
`;

const Page404 = function Page404(props) {
   
    let {
    navigate } = props;
    return <Page404Box>
        <ErrorBlock status="empty" title="您访问的页面不存在" description="去逛逛其他页面吧" />
        <div className="btn">
            <Button color="warning"
                onClick={
   () => {
   
                    navigate(-1);
                }}>
                返回上一页
            </Button>
            <Button color="primary"
                onClick={
   () => {
   
                    navigate('/', {
    replace: true });
                }}>
                回到首页
            </Button>
        </div>
    </Page404Box>;
};
export default Page404;

首页和详情页的登录及收藏管理

首页中的登录处理：

HomeHead组件中使用redux：

...
import {
    connect } from "react-redux";
import action from '../store/actions'
...
export default connect(
    state => state.base,
    action