页面跳转；时间比较；model，view；获取路径id

页面跳转

  goBack(){
        this.props.history.push('/msgPb/carouselMng/carlist');
    }

获取URL中的参数

this.props.match.params中包含地址栏的参数

image.png

时间比较：

if(moment(origin.startValue).format('YYYY-MM-DD') > moment(origin.endValue).format('YYYY-MM-DD')) {
            message.destroy();
            return message.info('开始时间不能大于结束时间');
        }

model和view分开（逻辑和视图分开）

目录结构：

image.png

index.js

import React from 'react';
import  Model from './model.js';
import  View from './view.js';

export default function(props) {
    return (
        <Model  {...props}>
            {
                prop=><View  {...prop} />
            }
        </Model>
    );
}

model组件专门用来写逻辑和交互，再将函数传给视图组件view

model.js

import React from 'react';
import bind from 'react-autobind';
export default class TopMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            downModal: true
        
        };
        bind(this);
    }
  
    onDown() {
        this.setState({
            downModal: false
        });
    }
    render() {
        return (
            this.props.children({ 
                ... this.props, ...this.state,
                onDown: this.onDown,
        
            })
        );
    }
}

函数组件将状态和属性传给子组件

view.js

import React from 'react';

export default function(props) {
   
    const { downModal,onDown} = props;

   return(
             <Button type="primary"  onClick={onDown}><Icon type="search" />搜索</Button>
              //  需要传参数时：  //  onClick={onDown.bind(this, record)}
          )
}

使用函数组件无状态，专门用来渲染页面

进入某个详情页获取地址栏传的id：

<Route path={`${match.url}/detail/:id`} component={AppManageAddDetail} />
const { match:{params:{ id, }}} = this.props;

有时候params无参数，可以使用此方法强行在路径加入一个id

路由常用的方法：

            <Switch>
                 <Route  path={`${match.url}/publist`}  render={(prop)=><PubList {...prop} {...props}   />} />
                 <Route   path={`${match.url}/pudetail/:id`}  render={(prop)=><Pubdetail {...prop} {...props}  />}  />
                 <Redirect from={`${match.url}`}  to={`${match.url}/publist`}/>
            </Switch>

1 在render属性中渲染组件，传入属性
2 Redirect ：默认路径或路径输入不完整或者输入有误的时候进入指定页面 to--> from
3 match.url动态获取路径