手记

使用React构建精简版本掘金(二)


咋一看,是不是感觉掘金改版了呢!如果你有这个错觉,那就说明我仿照的还算可以,我就当是对我的肯定吧,O(∩_∩)O~~

首页

顶部标签


即我上面红框圈住的部分,这部分由于要做页面滚动的时候常驻顶部,个人为了简单省事,采用了ant-design中的Affix组件,另外导航组件我抽离了一个公用组件,从外部传入tags数组。

import { Affix} from 'antd';
...
this.state={
    tags:[
        {
            path:'recommended',
            text:'推荐'
        },
        {
            path:'following',
            text:'关注'
        }
    ]
}
...
<Affix offsetTop={this.state.top}>
    <div className="home-nav">
        <nav>
            <HomeNav tags={this.state.tags} match={match}/>
            <a href="/">标签管理</a>
        </nav>
    </div>
</Affix>

HomeNav组件如下

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
...
class HomeNav extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <ul>
                {this.props.tags.map((item,index)=>{
                    return <li key={item.path}>
                        <NavLink to={`/timeline/${item.path}`}>{item.text}</NavLink>
                    </li>
                })}
            </ul>
        );
    }
}

export default HomeNav;

动作部分


该部分的实现方式可参考上面tag标签实现部分,基本类似。
头像部分我使用了ant-design中Avatar,用来代表用户或事物,支持图片、图标或字符展示。

文章列表部分

列表部分使用了ant-design中list组件

  • 列表结构实现
import { List,Statistic,Icon,Popover } from 'antd';
...
const {data}=this.props;
...
<List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
    <List.Item extra={item.articleImage ? <img width={80} alt="logo" src={item.articleImage} />:''} onClick={this.showArticleInfo.bind(this,item.id)}>
        添加内容
    </List.Item>
    )}
/>

实际中data应该是根据传入的userID和标签去数据库查询得到的真实数据,我这里的data就从上一级中进行了获取。每一个listItem上面绑定了点击事件,最终需要跳转到文章详情页面。

  • 列表内部结构


整体分成上中下三部分来实现布局,右侧的图片是在上一步listItem中配置extra属性可以实现。

<article>
    <section className="list-part1">
        <ul>
            <li className="item post">{item.articleType==='1'?'专栏':'小册'}</li>
            <li>{item.author}</li>
            {item.time?<li>{item.time}</li>:''}
            {item.tags.length!==0?<li>{item.tags.map((tag,index)=>{
                return <NavLink key={tag} to={`/tag/${tag}`}>{tag}</NavLink>
            })}</li>:''}
        </ul>
    </section>
    <section className="list-part2">
        <NavLink to={`/post/:articleId`}>{item.title}</NavLink>
    </section>
    <section className="list-part3">
        {item.articleType==='1'?
            <div>
                <Statistic value={item.starNum} prefix={<Icon type="like" theme="filled" style={{ fontSize: '14px'}} />} onClick={()=>this.props.editStar(item.id)} />
                <Statistic value={item.commentNum} prefix={<Icon type="message" theme="filled" style={{ fontSize: '14px'}} onClick={()=>this.props.lookComment(item.id)} />} />
                <Icon type="upload" style={{ fontSize: '16px',marginLeft:'10px',borderRight:'none'}} />
                <Icon type="star" theme="filled" style={{ fontSize: '16px'}} onClick={()=>this.props.collectArticle(item.id)} />
            </div>:
            <div className="xiaoce-action-row">
                <span className="link-btn buy">购买人数: {item.sellNums}</span>
                <span className="link-btn sale">特价: {item.price}元</span>
                <span className="link-btn share">
                    <Icon type="upload" style={{ fontSize: '16px',marginLeft:'10px',borderRight:'none'}} onClick={()=>this.props.shareArticle(item.id)} />
                    分享
                </span>
            </div>
        }
    </section>
</article>

掘金官网文章列表根据文章的类型是专栏还是小册显示不同的内容,即这里根据item的articleType进行了区分,这里用到了三目运算符做了显示控制渲染。
React中条件渲染的方式有以下几种,补充下知识点:
(1)if 语句
(2)三目操作符
(3)逻辑 && 操作符
(4)switch… case… 语句
(5)枚举
(6)多层条件渲染
(7)使用高阶组件
详情可查阅该文章

点击分享

  • 安装qrcode.react插件
yarn add qrcode.react --save
  • 引入使用
const QRCode = require('qrcode.react');
...
<QRCode value={this.props.value} />

value值是从上一级组件传入的值,该插件属性描述:

prop type default value
value string -
renderAs string (‘canvas’ ‘svg’) ‘canvas’
size number 128
bgColor string (CSS color) “#FFFFFF”
fgColor string (CSS color) “#000000”
level string (‘L’ ‘M’ ‘Q’ ‘H’) ‘L’
includeMargin boolean false
  • 抽离分享组件
import React, { Component } from 'react';

class Qrcode extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shareTypes:[
                {
                    image:'//b-gold-cdn.xitu.io/v3/static/img/weibo.8e2f5d6.svg',
                    text:'微博',
                    showQrcode:false,
                },
                {
                    image:'//b-gold-cdn.xitu.io/v3/static/img/wechat.844402c.svg',
                    text:'微信扫一扫',
                    showQrcode:true,
                }
            ]
        }
    }
    render() {
        const QRCode = require('qrcode.react');
        return (
            <ul>
                {this.state.shareTypes.map(item=>{
                    return <li key={item.text} style={{borderBottom:'1px solid rgba(217,222,224,.99)',padding:'10px',cursor:'pointer'}}>
                        <div>
                            <img alt={item.text} src={item.image} style={{width:'24px',height:'24px',marginRight:'5px'}} />
                            <label style={{color:'#8f969c'}}>{item.text}</label>
                        </div>
                        {item.showQrcode?<div style={{textAlign:'center'}}>
                            <QRCode value={this.props.value} />
                        </div>:''}
                    </li>
                })}
            </ul>
        );
    }
}

export default Qrcode;
  • 分享组件使用
import Qrcode from '../../components/Qrcode';
...
<Popover content={<Qrcode value={window.location.href+'/'+item.id} />} placement="bottom" trigger="click">
    <Icon type="upload" style={{ fontSize: '16px',marginLeft:'10px',borderRight:'none'}} onClick={()=>this.props.shareArticle(item.id)} />
    分享
</Popover>

右侧卡片内容

这块内容采用了ant-design中的card组件,直接看代码吧。

import { Card } from 'antd';
...
<Card
    title="掘金优秀作者"
    style={{ width: '100%' }}
    hoverable={'true'}
    actions={[<NavLink to='/recommendation/authors/recommended' style={{color:'#007fff'}}>查看更多></NavLink>]}
    >
    <List
        itemLayout="horizontal"
        dataSource={this.props.goodAuthor}
        renderItem={item => (
        <List.Item onClick={()=>window.location.href='/user/'+item.id}>
            <List.Item.Meta
            avatar={<Avatar size={46} src={item.userImage} />}
            title={item.title}
            description={<div className="overflow-ellipsis">{item.desc}</div>}
            />
        </List.Item>
        )}
    />
</Card>

goodAuthor数据是从父级传入的数据哈。


这里的内容结构类似,外层card组件,内置不同不同内容,就不重复了,想看具体实现的话请移步github,不要忘了star哈。

card内部使用list组件,竖着排列各自的内容,这一块总觉得可以抽成一个公用的card组件,然后填充不同内容,暂时就先这样吧,列入后期重构计划!这时就怀念vue中的slot方法了,可以方便的放置不同内容。jsx也有自己的方便之处吧,灵活的使用各种标签。

以上就是首页的一个简单说明了,页面大部分的链接router跳转功能还没有实现,后续陆续更新中。

想看第一篇文章的朋友可以查看使用React构建精简版本掘金(一),上述所有详细代码都已经放到github了,欢迎浏览和star哈,都已经看到这里了,那就麻烦大家点个赞在走吧!

既然没有合适的坑,那就趁着闲暇,继续提升自己的能力吧!最后鼓励下自己:扛过了艰难的时光,回头看,那也就不是什么大不了的事情了!

0人推荐
随时随地看视频
慕课网APP