React Webapp(二)-项目开发

https://segmentfault.com/a/1190000011474522
这个学习redux很有用

轮播用 react-slick组件

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

$npm install react-slick

<ins>标签语义：被插入的文本</ins>
<del>标签语义：被删除的文本</del>

map函数中返回多嵌套标签时，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>

当isBlocking为true的时候，再进行路由跳转时会弹出message里面的对话内容

<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跳转时，页面不发生变化

 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中的某一个对应Route，它去匹配的路由页面是从Switch本location中去找的。当isModal 为真的时候匹配的路由页面是从整个父级render去找，所以匹配到的是： {isModal ? <Route path="/img/:id" component={Modal} /> : null}这个Route

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

动态style是这么写的

this.props.location.pathname

获取当前路径

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 }