https://segmentfault.com/a/1190000011474522
這個學(xué)習(xí)redux很有用

輪播用 react-slick組件

插件的css樣式是在index.html中引入的

$npm install react-slick

<ins>標(biāo)簽語義：被插入的文本</ins>
<del>標(biāo)簽語義：被刪除的文本</del>

map函數(shù)中返回多嵌套標(biāo)簽時，return要加（）

｛
      data.map(item=>{
          return (
              <div>
                    <span></span>
              </div>
                  )
        })
｝

map組件嵌套可以這么寫：

｛
      data.map(item=>{
          return <LikeList key={item.id} data={item}> </LikeList>
        })
｝

LikeList 組件

class LikeList  extendes Component{
    render(){
        const { id,name,img,age } = this.props.data;
        return (
              ...
        )
      }
}

下拉刷新：8-6

這個圖？？？

image.png

首頁中的兩個模塊“猜你喜歡”和“超值特惠”，分別寫了倆個reducer（state,action）然后合并

image.png

表單阻攔：

         <form action="">
                <Prompt
                    when={isBlocking}
                    message={location =>
                        `Are you sure you want to go to ${location.pathname}`
                    }
                />
            </form>

當(dāng)isBlocking為true的時候，再進(jìn)行路由跳轉(zhuǎn)時會彈出message里面的對話內(nèi)容

<Switch>
          <Route path="/" exact component={Home} />
          <Redirect from="/old-match" to="/will-match" />
          <Route path="/will-match" component={WillMatch} />
          <Route component={NoMatch} />
        </Switch>

路由點擊從/old-match——will-match跳轉(zhuǎn)時，頁面不發(fā)生變化

 previousLocation = this.props.location;
   return (
      <div>
        <Switch location={isModal ? this.previousLocation : location}>
          <Route exact path="/" component={Home} />
          <Route path="/gallery" component={Gallery} />
          <Route path="/img/:id" component={ImageView} />
        </Switch>
        {isModal ? <Route path="/img/:id" component={Modal} /> : null}
      </div>
    );

isModal 為假的時候，顯示switch中的某一個對應(yīng)Route，它去匹配的路由頁面是從Switch本location中去找的。當(dāng)isModal 為真的時候匹配的路由頁面是從整個父級render去找，所以匹配到的是： {isModal ? <Route path="/img/:id" component={Modal} /> : null}這個Route

  return (
    <div
      style={{
        width: 50,
        height: 50,
        background: color
      }}
    />
  );

動態(tài)style是這么寫的

this.props.location.pathname

獲取當(dāng)前路徑

image.png

switch用法注意了，因為/second是可以同時匹配/和/second的，以至于它匹配到第一個是時候就懶得往下找了，如果是這倆個Route換一下位置就能解決，但是總不能老是換位置解決，所以用"extra"它的中文翻譯是：“精確”，只匹配和path完全匹配的路由。

<Route  path={ `${match.path}/edit/:editid` } exact component={EditTable}></Route>

input表單寫法：

  inputchange(e){
        this.setState({id_:e.target.value})
    }
<input type="text" value={id_} onChange={this.inputchange.bind(this)}/>

還可以直接這么寫：

<input type="text" value={id_} onChange={e=>{this.setState({id_:e.target.value})}}/>

寫table的reducer

import {handleActions} from 'redux-actions'

const initialState = {

}

const tableReducer = handleActions({

},initialState)

export { tableReducer as default }