<衣搭搭>项目开发总结

显示与隐藏:

<div className={this.state.fixture ? '' : 'hidden'}>
    <Login onName={this.props.onName}/>
</div>
<div className={this.state.fixture ? 'hidden' : ''}>
    <Register/>
</div>

<li className={this.props.name===''?'hidden':''}>
    <a onClick={this.logout}>退出</a>
</li>

 特别的下拉框:

<select onChange={this.selectSort}>
    <option value="上衣">上衣</option>
    <option value="裤子">裤子</option>
</select>

<select multiple="multiple" onChange={this.selectStyle}>
    <option value="小清新">小清新</option>
    <option value="森女风">森女风</option>
    <option value="欧美风">欧美风</option>
    <option value="淑女风">淑女风</option>
</select>

 

ajax一步请求和同步请求
then同步:
componentDidMount: function () {
    $.get('/AllMatches').then(data => {
     this.setState({clothes:data});
     });
},

异步的回调函数:

$.get("/clothes/0",function(data) {
  this.setState({allColthes:data});
}.bind(this)

 

 

路由跳转: 

location.href = '/'

"top.location.href"是最外层的页面跳转 
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转.

browserHistory.push('/');

 render(

    <Router history={browserHistory}>

        <Route path="/" component={App}> //首先渲染App组件(因为App组件写在最外层)
            <IndexRoute component={Home}/> // 在渲染App组件的同时会默认渲染Home组件
            <Route path="Home" component={Home}/>
            <Route path="LoginAndRegister" component={LoginAndRegister}/>
            <Route path="AllMatches" component={AllMatches}/>
            <Route path="ClothesList" component={ClothesList}/>
            <Route path="AddList" component={AddList}/>
        </Route>

    </Router>,
    document.body
)

父组件向子组件传值的时候要用到:

 

render() {
    return (
        <div>  
            <Nav name={this.state.name}/>
            {this.props.children && React.cloneElement(this.props.children, 
              {
                onName: this.getName   
             })
            }
        </div>
    )
}