react 拖拽組件該怎么搭建？

直接寫(xiě)了一個(gè)拖拽排序的組件，主要原理是
通過(guò)this.props.children,來(lái)重新給每個(gè)children套一個(gè)殼，然后這個(gè)殼是draggable=true的，但是因?yàn)閛nDrop判定的組件每次都判定到children里面的元素，我無(wú)法控制children元素的id，所以排序是報(bào)錯(cuò)，于是我給殼加了一個(gè)頂，zindex=99的透明層，給這個(gè)頂加了排序?qū)傩?，但是這樣，因?yàn)椴粫?huì)穿透，children的所有響應(yīng)事件全部失效了（hover），該咋辦？

  createChild(){
    if(!this.state.children) return; 
    var tmp = [];
    for (let j = 0; j < this.state.children.length; j++) {
        if (this.state.children[j].props.dragable) {
          tmp.push(<div className={style.ChildBox} key={'dropBox'+j} id={j}  
            draggable={true}      //設(shè)置可拖拽
            onDragStart={this.onDragStart}    //  設(shè)置拖動(dòng)開(kāi)始Fun
            onDragOver={this.onDragOver}>   //拖動(dòng)結(jié)束Fun
          <div className={style.fakeMask} id={j}>   //假的帶有排序ID的頂 絕對(duì)定位
            </div>{this.state.children[j]}
          </div>)
        } else {
          tmp.push(<div className={style.ChildBox} key={'dropBox'+j} id={j}><div className={style.fakeMask} id={j}></div>{this.state.children[j]}</div>)
        }
        
    }
    return tmp
  }
onDrop(event){
    this.props.onSort(event.dataTransfer.getData('id'),event.target.id);    //將被拖動(dòng)元素序列和被放置元素的序列傳給父組件
}

fakeMask就是我說(shuō)的透明的頂，加上排序id我才好給父組件返回排序序列。
如果不加，則每次onDrop判定的都是{this.state.children[j]}拿不到排序;
父組件拿到排序ID以后再通過(guò)排序ID，重新調(diào)換數(shù)據(jù)數(shù)組內(nèi)位置，然后重新渲染數(shù)據(jù)。

父組件：

onSort(dragindex,dropindex){
    let newArray = this.insertArray(this.state.dataArray,parseInt(dragindex),parseInt(dropindex));    //將被拖動(dòng)組件元素序列插入被放置元素序列的前面，返回新數(shù)組
    this.setState({
      dataArray:newArray,
    });
  }
insertArray(arr, item, index) {
    var t = arr[item];
    arr.splice(item, 1);
    return arr.slice(0,index).concat(t, arr.slice(index));
  }