需求一

从网络请求到的数据中，判断返回的某个值(例如isAward)，如果为中奖者，就取前者(白底蓝图标)，否则取后者(蓝底白图标) 。

image.png

做法：可以采用三目运算的做法就可以实现该需求，大致就是{item.isAward ? (A标签):(B标签)}这种写法，以下为例子：

 render() {
    const tba = this.state.Dates.map((item, index) => {
      const tabs = {
        key: index,
        id: item.id,
        userName: item.userName,
        operate: (
          <div className="right_operate">
            <ul>
              {/* 如果为中奖者，就取前者(白底蓝图标)，否则取后者(蓝底白图标) */}
              {item.isAward ? (
                <li
                  style={{
                    backgroundColor: "#3694ff",
                    border: "1px solid #3694ff"
                  }}
                  onClick={() => this.setWinnerFunc(item.userId,item.userName)}
                >
                  <span
                    className="iconfont icon-cup"
                    style={{ color: "#fff" }}
                  ></span>
                </li>
              ) : (
                <li
                  style={{
                    backgroundColor: "#fff",
                    border: "1px solid #3694ff"
                  }}
                  onClick={() => this.setWinnerFunc(item.userId,item.userName)}
                >
                  <span
                    className="iconfont icon-cup"
                    style={{ color: "#3694ff" }}
                  ></span>
                </li>
              )}
            </ul>
          </div>
        )
      };
      return tabs;
    });

    return (
      <Fragment>        
          <Table
            size="small"
            columns={this.state.columns}
            pagination={{ total: +this.state.totalData, defaultCurrent: 1 }}
            rowSelection={rowSelection}
            dataSource={tba}
            onChange={this.onPageNum}
          />
      </Fragment>
    );
  }

需求二

上传图片前，显示文字；上传文件后，显示图片，且点击图片后也还可以实现上传。

• 上传前

  
  image.png

• 上传后

  
  image.png

做法：可以采用if else的做法就可以实现该需求，大致就是if(有图片){展示图片} else{隐藏图片}这种写法，以下为例子：

  render() {
    var {imagePreviewUrl,showImg} = this.state;
    var imagePreview = null;
    if (imagePreviewUrl) {
      imagePreview = ( <label style={{backgroundColor:"red"}} for="avatarFor">< img style={{width:'80px',height:'80px'}} src={imagePreviewUrl} /></label>);
      showImg = 'none';
    } else {
      showImg = 'block';
    }

    return (
      <Fragment>
          <p style={{ margin: "0" }}>上传打款凭证：</p>
            <input id="avatarFor" style={{display:'none'}} type="file" onChange={(e)=>this.handleImageChange(e)}/>
            {imagePreview}
            <label style={{color:"#1890FF",border:"1px dashed #1890FF",padding:'3px 10px ',display:showImg}} for="avatarFor">+点击上传图片</label>
      </Fragment>
    );
  }