React Webapp(二)-项目开发

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

轮播用 react-slick组件

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

$npm install react-slick

标签语义：被插入的文本
标签语义：被删除的文本

map函数中返回多嵌套标签时，return要加（）

｛
      data.map(item=>{
          return (
              

                    
              
                  )
        })
｝

map组件嵌套可以这么写：

｛
      data.map(item=>{
          return  
        })
｝

LikeList 组件

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

下拉刷新：8-6

这个图？？？

image.png

首页中的两个模块“猜你喜欢”和“超值特惠”，分别写了俩个reducer（state,action）然后合并

image.png

表单阻拦：

         

                
                        `Are you sure you want to go to ${location.pathname}`
                    }
                />
            

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

路由点击从/old-match——will-match跳转时，页面不发生变化

 previousLocation = this.props.location;
   return (
      

        
          
          
          
        
        {isModal ?  : null}
      
    );

isModal 为假的时候，显示switch中的某一个对应Route，它去匹配的路由页面是从Switch本location中去找的。当isModal 为真的时候匹配的路由页面是从整个父级render去找，所以匹配到的是： {isModal ? : null}这个Route

  return (
    

  );

动态style是这么写的

this.props.location.pathname

获取当前路径

image.png

switch用法注意了，因为/second是可以同时匹配/和/second的，以至于它匹配到第一个是时候就懒得往下找了，如果是这俩个Route换一下位置就能解决，但是总不能老是换位置解决，所以用"extra"它的中文翻译是：“精确”，只匹配和path完全匹配的路由。

input表单写法：

  inputchange(e){
        this.setState({id_:e.target.value})
    }

还可以直接这么写：

{this.setState({id_:e.target.value})}}/>

写table的reducer

import {handleActions} from 'redux-actions'

const initialState = {

}

const tableReducer = handleActions({

},initialState)

export { tableReducer as default }