通过id 动态显示title内用_通过React16.8构建新闻网站第四章:论坛模块和文章模块的实现...

8ff31fb246e2a7f86f216d40ee74489e.png

专栏地址:

前端开发​zhuanlan.zhihu.com
8caee83981dcc32b1c1f26f15fc1d2b5.png

第四章为网站文章页面和论坛页面的构建

实现效果图如下:

40475f2ee4f2c0028726111a2dfbddc2.png
文章模块

333cbd74f302dc027999de7dbbab4047.png
论坛模块

628250b8ceb64212485e0fbfce78a76b.png
文章详情页面

文章模块和论坛模块都使用的Ant Desgin的List列表,文章模块是通过分页来渲染数据,而论坛模块采用点击加载更多渲染到同一页面上(本质上还是分页),这样是因为看了其他软件的论坛模块和文章模块,论坛一般是采用下来刷新在同一页面上渲染,这个项目以后如果做移动端的适配了,我再做下拉刷新。

点击加载更多loading效果:

a1c3bcacb591168f65fad845d29e3ac8.png
点击加载更多

具体实现:

实现的每一步在注释中已标明清楚

1 论坛模块

import 

2文章模块实现:

import 

3 文章详情页面

这里对详情页面进行简单构建(不区分文章还是帖子)

功能 1.展示具体内容 2.留言评论功能

效果图:

628250b8ceb64212485e0fbfce78a76b.png

Router

{
    

Detail组件

import 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值