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 }
