内容简介:在重构的路上,总能写点什么东西出来这东西不复杂,丢出来,一方面当做笔记,一方面可以给有需要的人;用到技术点:
在重构的路上,总能写点什么东西出来
这东西不复杂,丢出来,一方面当做笔记,一方面可以给有需要的人;
用到技术点:
-
css module
: 包括内置的继承特性,类似less
的嵌套写法那种 - 用到的
react 16.6
特性-
lazy, Suspense
来实现子组件的懒加载 -
memo
让函数式组件有PureComponent
的特性(浅比较)
-
-
flexbox
来布局
效果图
代码实现
index.js
: 组件的主入口
import React, { PureComponent, lazy, Suspense } from 'react'; import { Avatar } from 'antd'; import style from './index.css'; // 渲染不同内容的组件 const LazyComponent = lazy(() => import('./RenderContent')); export default class index extends PureComponent { state = { loading: true, list: [ { time: '2018-11-12 15:35:15', avatar: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90', nickname: '用户甲', pos: 1, voice: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-chat/3_508340417_c84f79407f5bc16b9e7ee0373631cf35.aac', text: '', }, { time: '2018-11-12 15:36:15', avatar: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90', nickname: '用户甲', pos: 1, voice: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-chat/3_508340417_c84f79407f5bc16b9e7ee0373631cf35.aac', text: '', }, { time: '2018-11-12 15:37:15', avatar: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90', nickname: '卡布奇诺', pos: 2, voice: '', text: '该词语多用于讽刺和揶揄调侃。也有送快递、查水电气、社区送温暖等引申说法。例如:(1)有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕;(2)在贴吧或论坛里拥有删帖权限的大小吧主,检查贴吧里是否存在灌水的帖子或跟帖,遇到就进行删除的行为。', }, { time: '2018-11-12 15:38:15', avatar: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90', nickname: '卡布奇诺', pos: 2, voice: '', img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3040115650,4147729993&fm=26&gp=0.jpg', text: '该词语多用于讽刺和揶揄调侃。也有送快递、查水电气、社区送温暖等引申说法。例如:(1)有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕;(2)在贴吧或论坛里拥有删帖权限的大小吧主,检查贴吧里是否存在灌水的帖子或跟帖,遇到就进行删除的行为。', }, { time: '2018-11-12 15:39:15', avatar: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90', nickname: '卡布奇诺', pos: 2, voice: '', img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3040115650,4147729993&fm=26&gp=0.jpg', }, ], }; static getDerivedStateFromProps(nextProps, prevState) { const { data } = nextProps; if (!data || !Array.isArray(data) || data.length <= 0) { return null; } return { list: data, }; } // 唤醒子组件的回调过程 wakeUpLazyComponent = () => { return <div>loading.....</div>; }; render() { const { list, loading } = this.state; const isRender = list && list.length > 0; return ( <ul className={style['list-wrapper']}> {isRender && list.map((item, listIndex) => { return ( <Suspense fallback={this.wakeUpLazyComponent()} key={listIndex}> <li className={style['list-item']}> <span className={style['time']}>{item.time ? item.time : '时间占位符'}</span> <div className={ item.pos === 1 ? style['list-item-horizontal'] : style['list-item-horizontal-reverse'] } > <Avatar shape="square" src={ item.avatar ? item.avatar : 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' } /> <div className={ item.pos === 1 ? style['content-wrapper-flex'] : style['content-wrapper'] } > <p className={item.pos === 1 ? style.nickname : style['nickname-right']}> {item.nickname ? item.nickname : '用户昵称占位符'} </p> <div className={style.content}> <LazyComponent {...item} /> </div> </div> </div> </li> </Suspense> ); })} </ul> ); } } 复制代码
RenderContent.js
:渲染对话条目
import React, { memo } from 'react'; import style from './index.css'; // antd 图文组件 import { Card } from 'antd'; const { Meta } = Card; const RenderContent = memo(props => { if (props.img && props.text) { return ( <Card hoverable style={{ width: 300 }} cover={<img alt="example" src={props.img ? props.img : ''} />} > <Meta description={props.text ? props.text : ''} /> </Card> ); } if (props.img) { return ( <div className={style['img-wrapper']}> <img className={style['img-preview']} src={props.img ? props.img : ''} alt="photos" /> </div> ); } if (props.text) { return <div className={style['bubble']}>{props.text}</div>; } if (props.voice) { return <audio src={props.voice ? props.voice : ''} controls />; } return null; }); export default RenderContent; 复制代码
index.css
: 样式
composes
是 css module
能识别的特殊字段,用于继承其他样式的
/* 列表全局样式 */ .list-wrapper { list-style-type: none; list-style: none; padding-left: 0; } /* 列表基本样式 */ .list-item { display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; margin: 15px 0; } /* 水平展开 */ .list-item-horizontal { display: flex; justify-content: flex-start; align-items: flex-start; } /* 右对齐方式变化 */ .list-item-horizontal-reverse { composes: list-item-horizontal; flex-direction: row-reverse; } /* 用户名 */ .nickname { font-size: 12px; padding:0 10px; color: #8a8484; margin-bottom: 5px; } /* 用户名右对齐 */ .nickname-right { composes: nickname; text-align: right; } /* 时间样式 */ .time { text-align: center; background-color: #cecece; color: #fff; border-radius: 3px; align-self: center; font-size: 12px; padding: 5px; margin:5px; } /* 内容区域 */ .content-wrapper { margin: 0 15px; } /* 弹性伸缩 */ .content-wrapper-responsive { flex: 1; } /* 气泡文字 */ .bubble { padding: 8px; color: #333; max-width: 300px; line-height: 1.5; background-color: #a7e544; border-radius: 3px; text-align: left; text-indent: 10px; margin:0 3px; } /* 图片预览 */ .img-wrapper { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); border-radius: 3px; padding: 5px; } .img-preview { max-width: 200px; } 复制代码
使用姿势
接受的 props
只有一个 data
, 格式是 [Obj]
(数组对象);
条目字段解释
- time : 时间
- avatar : 用户头像
- nickname :用户昵称
- pos : 1 (1在左侧渲染,2在右侧渲染)
- voice (音频)/ text (文本内容)/ img (图片内容) => voice (唯一)/** text + img** / text
{ time: '2018-11-12 15:35:15', avatar: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-avatar/3_avatar.jpg?x-oss-process=image/resize,m_fixed,w_90,h_90/quality,q_90', nickname: '用户甲', pos: 1, voice: 'https://sx-stag.oss-cn-shenzhen.aliyuncs.com/user-chat/3_508340417_c84f79407f5bc16b9e7ee0373631cf35.aac', text: '', img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3040115650,4147729993&fm=26&gp=0.jpg' }, 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 小白解密安卓机上微信聊天记录
- python可视化文本分析(1)—分析QQ班群聊天记录宏观
- 手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)
- Golang入坑笔记 – 整理了和她的9万条微信聊天记录,每天通过邮件分享给自己
- Telegram 支持删除聊天双方设备中的消息记录
- 3.64亿条中国用户聊天信息泄露到网上,涉及微信支付记录
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java学习笔记
林信良 / 清华大学出版社 / 2015-3-1 / CNY 68.00
●本书是作者多年来教学实践经验的总结,汇集了学员在学习课程或认证考试中遇到的概念、操作、应用等问题及解决方案 ●针对Java SE 8新功能全面改版,无论是章节架构或范例程序代码,都做了重新编写与全面翻新 ●详细介绍了JVM、JRE、Java SE API、JDK与IDE之间的对照关系 ●从Java SE API的源代码分析,了解各种语法在Java SE API中的具体应用 ......一起来看看 《Java学习笔记》 这本书的介绍吧!