我的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,
  },

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

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

<CustomInput style={ { width: 425, } }/>

的input组件

采用Icon 并改写icon类

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

nginx打包时加入参数

try_files $uri $uri/ /index.html;

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