javascript - 隐藏表格第一行的删除图标 - ReactJS

Question

我有一个包含多行的表格，每行都有删除图标。我必须隐藏第一行中的删除图标，以便用户无法删除第一行。

到目前为止我已经尝试过了。

代码:

<div className="panel-body">
  <div className="row grid-divider">
    <div className="col-sm-6">
      <div className="col-padding">
        <div className="pos-div"><h4>{_labels.LOCATION_PANEL_CFG_LOCATION}</h4><a data-toggle="toggle" data-target="#jdCheckbox2" className="jdClickable2" onClick={() => this.deleteChekedAll()} style={this.props.conLocations.length < 2 ? {pointerEvents: 'none' }:null}>{_labels.LOCATION_PANEL_SELECT_ALL}</a><button className="allLargeBtn" onClick={() => this.delAllChecked()} disabled={this.props.conLocations.length < 2}> {_labels.LOCATION_PANEL_REMOVE} </button></div>
        <div><table className="table configTableColor"><thead>{this.props.conLocations.map((locc, index) => <tr key={index}><th><input type="checkbox" id="#jdCheckbox2" onChange={() => this.deleteToggle(locc.mruCode)} checked={this.props.isDeleted.find(chkItems => chkItems.mruCode === locc.mruCode)} /><label></label></th><th className="configLocationInfo">{locc.mruCode} - {_labels[locc.division]} - {locc.country}</th><th className="text-right"><img alt="DeleteIcon" onClick={() => this.handleRemove(locc.mruCode)} className={this.props.conLocations.length===1?"deleteIconStyle1":"deleteIconStyle"} src="img/delete_large_active.png" /></th></tr>)}</thead></table></div>
      </div>
    </div>
  </div>
</div>

CSS代码:

.deleteIconStyle {
    width: 16px;
    cursor: pointer;
}

.deleteIconStyle1{
    opacity: 0;
}

如何在React JS中隐藏表格第一行的删除图标

Answer 1

您可以使用 index 有条件地渲染删除按钮，为此不需要任何 CSS。

{index !== 0 && <img alt="DeleteIcon" onClick={()=> this.handleRemove(locc.mruCode)} className={this.props.conLocations.length===1?"deleteIconStyle1":"deleteIconStyle"} src="img/delete_large_active.png" />}