如何在ReactCrop组件上层显示图标？图标被组件遮挡如何解决

1. 调整DOM结构 #

你的图标和ReactCrop现在分属两个独立的.preview容器，同级DOM中后渲染的ReactCrop容器默认会覆盖先渲染的图标容器，需要将图标放到和ReactCrop同一个.preview容器内：

return (
  <div>
    <div className="webcamCapture">
      { campic}
    </div>
    { buttons}
   
    {this.state.imageData && (
      <>
      {src && (
         <div className="preview">
          {/* 把图标移到此处，和ReactCrop同属一个preview容器 */}
          <div> 
            <FontAwesomeIcon className="preview__close" icon={faChevronLeft} onClick={() => this.setState({ imageData: null })}/>
          </div>
          <ReactCrop
            src={src}
            crop={crop}
            ruleOfThirds
            onImageLoaded={this.onImageLoaded}
            onComplete={this.onCropComplete}
            onChange={this.onCropChange}
          />
        </div>
      )}
       </>
    )}
  </div>
)

2. 给图标添加z-index属性 #

ReactCrop内部渲染的裁剪框、遮罩等元素默认带有层级设置，给你的图标添加足够高的z-index保证它在最上层：

.preview {
    position: relative;
}

.preview__close {
    position: absolute;
    top: 0;
    margin: 5px;
    cursor: pointer;
    color: red;
    z-index: 10; /* 新增这行，数值可以按需调大 */
}

可选排查项 #

如果修改后仍有遮挡，检查以下两点：

• .preview容器的父级元素是否设置了transform、opacity等会创建新层叠上下文的属性，若有需要保证该父级元素层级足够高
• 浏览器F12检查ReactCrop内部元素的z-index值，将.preview__close的z-index调整为比它更高即可

内容的提问来源于stack exchange，提问作者TCL