react手机端项目注意点,ant design-mobile框架

1.先新建一个项目，下载导入react, react-dom, react-router-dom包，如果使用sass预编译就下载导入node-sass,并用后缀名.scss(常用), .sass后缀名文件，哪里需要在哪导入sass样式文件

2.父路由与嵌套子路由

3.TabBar菜单栏的切换选中高亮

this.props.location.pathname
注意：由于这是个父子嵌套路由，如果在子路由里面改变了浏览器localtion,pathname的值后，父路由中的菜单栏没有与之对应选中高亮，那么就需要用到update钩子函数

/* 问题：点击首页导航菜单，导航到 找房列表 页面时，找房菜单没有高浪 原因：原来我们实现该功能的时候，只考虑了 点击以及第一次加载 Home 组件的情况但是，我们没有考虑不重新加载Home组件时的路由切换，因为，这种情况下，代码没有覆盖到解决： 在路由切换时，也执行 菜单高亮 的逻辑代码1 添加componentDidUpdate 钩子函数2 在钩子函数中判断路由地址是否切换3 在路由地址切换时，让 菜单高亮
*/
componentDidUpdate (prevProps) {// 拿到上一个更新值 prevProps// 拿到本次更新的值 this.propsif (prevProps.location.pathname !== this.props.location.pathname) {// 路由发生了改变，那么就设置当前高亮值this.setState({selectedTab: this.props.location.pathname})}
}

4.轮播图的坑：轮播图要有默认值，如果没有默认值就会有bug

解决方法：
设置一个布尔状态值，当轮播图数据获取完成后再把这个值设置为true,再进行渲染轮播图，每执行一次this.setState({})方法时，都会重新渲染render(){}

react手机端项目注意点,ant design-mobile框架相关推荐

2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
vue+weui 手机端项目
vue+weui 手机端项目俩个地址 https://weui.io/ https://github.com/Tencent/weui/wiki?tdsourcetag=s_pctim_aiomsg ...
Ant Design Mobile 5.6.0版本来了
一.Ant Design Mobile介绍 Ant Design Mobile( 官网地址:Ant Design Mobile - Ant Design Mobile ) 是由支付宝设计团队基于蚂蚁集 ...
Ant Design Mobile是什么？
Ant Design Mobile简称antd-mobile,是Ant Design的移动规范的React实现,是一个基于Preact/React/React Native的UI组件库:UI样式高度可 ...
如何修改ant design mobile或者其他UI组件的全局样式
问题描述: 有时候你可能会遇到一些前端CSS实现上的问题,因为美工的画图与你的项目使用的UI框架的样式大有出入,所以在写页面样式的时候多多少少会让你有些头疼,那么该类问题应该如何解决呢? 原因分析: ...
react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
基于Ant Design UI框架的React项目
概述这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目详细代码下载:http://www.demodashi.com/demo ...
ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...