我的react+material-ui之路

在学习react和material-ui时我遇到的问题和解决方法

react要安装得在当前文件夹下面安装, npm命令在当前文件夹执行

npm install -g全局安装, 不会安装在当前包下

npm install --save 在git到另一台电脑上时使用npm install 命令可以自动配置该环境

状态上升到最近的父控件

每个map都要有不同的key

在用CSS时,如果遇到hover等事件,可以在styles字典中用'&:hover' : {}来表示

每次新安装modules需要重新启动npm start

绑定click事件时如果需要传递参数用 onClick = {e => this.handle(e, params)}

setstate有的时候不会更新

如果渲染的时候需要用map来遍历列表,那么列表的内容要么用props传递进来,要么在componentWillMount中获取.如果是DidMount会报错,因为空列表没有map 可以用判断列表不空再创建map

一个组件需要用两个className渲染的话可以用 className={classes.A + ' '+ classes.B}

在react中, css内置在js中,放在style里面,每一个字典对应的就是类名和css属性, classes从props里面取出,然后用withStyles(styles)

如果文本框的value状态事先没有在类的state中声明, 则Textfiled的标签会一直在失去焦点之后下垂.

'&:nth-of-type(odd)': {}, 表格行中用这个表示奇数行

':hover' :{

'& another':{}

}表示hover之后另一个类的改变

重写组件比重写类要好

改写的时候可以参照git上的源文件.对改写的类和组件传入进去, 任何一个组件都有改写的接口.

例如

Select可以改写input, IconComponent组件

selectIcon:{color: "#fff",marginRight: 5,},                 <Selectvalue={ typeId }input={ <CustomInput style={ { width: 425, } }/> }IconComponent={ KeyboardArrowDown }inputProps={{classes: {icon: classes.selectIcon,}}}MenuProps={ {MenuListProps: {disablePadding: true,}} }onChange={ this.handleChange('typeId') }></Select>

这样就重写了一个select组件, 采用

的input组件

采用Icon 并改写icon类

build的时候如果加了homepage:"./"字段,用nginx打包的时候会出问题

nginx打包时加入参数

try_files $uri $uri/ /index.html;

jss中 after和before伪元素的content要用 ' " " '

转载于:https://www.cnblogs.com/btxlc/p/10526643.html

我的react+material-ui之路相关推荐

Material UI – React (2022) 版的完整教程
Material UI – React (2022) 版的完整教程这是关于 Material UI 的最期待的课程.该课程涵盖了 Material UI 的所有组件课程英文名:Material U ...
从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
Material UI 4.10 Skeleton 骨架
Material-UI官方学习资料它是React组件,实现了谷歌Material Design设计规范.世界上最流行的React界面框架. Material UI 4.10.0 发布了.Materi ...
react常用ui组件库
前端常用组件库移动端和pc端适配:react+chakre-ui组件库+recoil状态管理+react-router-dom+typescript https://chakra-ui.com/do ...
Material UI中JSS的写法(随手笔记)
引言: 我习惯在给别人讲解某一个知识点的时候不会按照官方文档上那么严谨的去总结,因为我也是初学者过来的,我深知对于入门新手来说探索一个新的知识领域他们需要的不是多么深奥的概念,而是怎么去简单理解 ...
Material UI 的安装与使用
Material UI 的安装使用 (附练习demo) Material UI ( 也称 MUI ) 是一个开源的React组件库,实现了Google的Material Design. 它包括一个全面 ...
react es6+ 代码优化之路-1
这里集合了一些代码优化的小技巧在初步接触 es6+ 和 react 的时候总结的一些让代码跟加简化和可读性更高的写法大部分知识点是自己在平时项目中还不知道总结的,一致的很多优化的点没有写出来,逐步 ...
[react] 你有用过哪些React的UI库？它们的优缺点分别是什么
[react] 你有用过哪些React的UI库?它们的优缺点分别是什么 antd ui 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
鸿蒙将用于工业；三星新芯片支持 5G 和 AI；Material UI 4.2.1 发布 | 极客头条
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
React爬坑之路二：Router+Redux
上一篇写了Antd和Axios的基本操作之前大标题到五了那么这篇从六开始 ST也是初学小白可能讲的完全不对大家当做小说随便读读消遣一下就好 React官网:https://reactjs.org/ ...

我的react+material-ui之路

我的react+material-ui之路相关推荐

最新文章

热门文章