我的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要用  ' " " '