咋一看,是不是感觉掘金改版了呢!如果你有这个错觉,那就说明我仿照的还算可以,我就当是对我的肯定吧,O(∩_∩)O~~
首页
顶部标签
即我上面红框圈住的部分,这部分由于要做页面滚动的时候常驻顶部,个人为了简单省事,采用了ant-design中的Affix组件,另外导航组件我抽离了一个公用组件,从外部传入tags数组。
1 | import { Affix} from 'antd'; |
HomeNav组件如下
1 | import React, { Component } from 'react'; |
动作部分
该部分的实现方式可参考上面tag标签实现部分,基本类似。
头像部分我使用了ant-design中Avatar,用来代表用户或事物,支持图片、图标或字符展示。
文章列表部分
列表部分使用了ant-design中list组件
- 列表结构实现
1
2
3
4
5
6
7
8
9
10
11
12
13import { 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属性可以实现。
1 | <article> |
掘金官网文章列表根据文章的类型是专栏还是小册显示不同的内容,即这里根据item的articleType进行了区分,这里用到了三目运算符做了显示控制渲染。
React中条件渲染的方式有以下几种,补充下知识点:
(1)if 语句
(2)三目操作符
(3)逻辑 && 操作符
(4)switch.. case.. 语句
(5)枚举
(6)多层条件渲染
(7)使用高阶组件
详情可查阅该文章
点击分享
- 安装qrcode.react插件
1 | yarn add qrcode.react --save |
- 引入使用
1 | const QRCode = require('qrcode.react'); |
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 |
- 抽离分享组件
1 | import React, { Component } from 'react'; |
- 分享组件使用
1
2
3
4
5
6import 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组件,直接看代码吧。
1 | import { Card } from 'antd'; |
goodAuthor数据是从父级传入的数据哈。
这里的内容结构类似,外层card组件,内置不同不同内容,就不重复了,想看具体实现的话请移步github,不要忘了star哈。
card内部使用list组件,竖着排列各自的内容,这一块总觉得可以抽成一个公用的card组件,然后填充不同内容,暂时就先这样吧,列入后期重构计划!这时就怀念vue中的slot方法了,可以方便的放置不同内容。jsx也有自己的方便之处吧,灵活的使用各种标签。
以上就是首页的一个简单说明了,页面大部分的链接router跳转功能还没有实现,后续陆续更新中。
想看第一篇文章的朋友可以查看使用React构建精简版本掘金(一),上述所有详细代码都已经放到github了,欢迎浏览和star哈,都已经看到这里了,那就麻烦大家点个赞在走吧!
既然没有合适的坑,那就趁着闲暇,继续提升自己的能力吧!最后鼓励下自己:扛过了艰难的时光,回头看,那也就不是什么大不了的事情了!