编码中典型问题记录

6.关于ajax传递参数总结

 

5.构建一个根据参数变化而展示不同类容的组件

//render前面

renderNews = () =>{
    let selectKey = this.state.selectKey;
    switch(selectKey) {
      case '1':
        return(
          <div>
            
            <div>
              <div style={{'100%'}}>
                <Link to={'/newsDetail'}>
                  <div className="cq-pull-left div-h3">
                    <img src="/static/images/cqfile.png" className="cq-news-icon" alt="图标"/>
                    七部门：降低养老院准入门槛 建立黑名单制度</div>
                </Link>
                <div className="cq-pull-right cq-look-num"><Icon type="eye-o" /> 33</div>
              </div>
              <div className="cq-clear">&nbsp;</div>
              <div className="cq-abstract">
                <p>
                  据民政部网站消息，8月18日上午，民政部、公安部、国家卫生计生委、食品药品监管总局、质检总局、国家标准委、
                  全国老龄办等七部门联合召开全国养老院服务质量推进视频会议，总结专项行动第一阶段取得的成果，
                  研究解决排查出的主要问题，部署下一阶段整治工作。
                </p>
              </div>
            </div>

            <div>
              <div style={{'100%'}}>
                <Link to={'/newsDetail'}>
                  <div className="cq-pull-left div-h3">
                    <img src="/static/images/cqfile.png" className="cq-news-icon" alt="图标"/>
                    国家知识产权局关于印发《关于严格专利保护的若干意见》的通知</div>
                </Link>
                <div className="cq-pull-right cq-look-num"><Icon type="eye-o" /> 20</div>
              </div>
              <div className="cq-clear">&nbsp;</div>
              <div className="cq-abstract">
                <p>
                  为深入贯彻党中央、国务院关于严格知识产权保护的决策部署，
                  认真落实《中共中央国务院关于完善产权保护制度依法保护产权的意见》（中发〔2016〕28号），推进知识产权强国建设，现就严格专利保护提出如下意见。
                </p>
              </div>
            </div>
          </div>
        );
        break;
      case '2':
        return(
          <div>
            
          </div>
        );
        break;
      case '3':

       return(
          <div>
            
          </div>
        );
        break;
      default:
        return(
          <div>
            
          </div>
        );
    }

  };


//return 前面

const newsElement = this.renderNews();

//return 后面

{newsElement}

 

 

 

4.用户的某一个字段在新增时可以输入，在编辑时需要禁用

this.isAdd() ? <Input /> : <Input disabled={true}/>

 

 

3.关于面包屑导航栏动态显示(比较常用)

//获取路由里面传递过来的如果以add为标识则做添加，否则做编辑
isAdd = () => this.props.match.params.id === 'add';

const breadcrumb = [{
      path: '/', name: '首页'
    }, {
      path: '/roomMain', name: '机房管理'
    }, {
      name: this.isAdd() ? '添加机房' : '编辑机房'
    }];

//调用 组件HlBreadcrumb导航
return (
      <div className="content-main">
        <HlBreadcrumb breadcrumb={breadcrumb}/>

 

 

2.当在调用后台接口时，必须要参照api文档进行工作开展，

remarks：
/*
   *  添加一个机房操作
   *
   * */
  async createRoom(value) {
    const {data} = await request(
      {
        method: 'post',
        url: '/api/room',
        data: value
      },
      {message: '添加成功'},
      {message: '添加失败'},
    );
    //this.setWebsite(data);
    this.getRoomList();
    return data; //then可以监听
  }

//需要注意rul下api前面不能有空格，是否需要添加反斜杠，url地址是否是api文档提供的

 

 

 

1.react命名的文件名首字母必须大写——如果小写开头，当服务器是Linux的时候无法识别，会导致jenkins自动化部署失败

eg：
reportFrom.js    (错误)
ReportFrom.js   (正确)