Javascript 如何更改复制元素的ID

我尝试用react smooth dnd创建dnd编辑器。我有两个容器：第一个是包含元素的工具栏，第二个是编辑器。 每个元素都有以下结构：

{
 id: shortid.generate(),
 type: 'TextElement',
 options: {
    text: 'Text',
    style: {
       padding: '10px 0 10px 15px'
    },
    isShowToolBar: false
 }
}

当我尝试将元素从第一个容器复制到第二个容器时，我想更改当前元素的

id

，但当我尝试使用

onDrop

回调时，我只能更改两个容器中每个元素的

id

如何更改

id

仅当前元素？

我的第一个（工具栏）容器是：

<Container
  groupName="1"
  behaviour="copy"
  getChildPayload={i => this.state.items[i]}
>
  {
    this.state.items.map((element,i) => {
      const component = createComponent(element, TYPE_TOOLBAR);
      return (
        <Draggable
          key={i}
          style={{display: 'inline-block', padding: '10px'}}
          className="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12"
       >
         {component}
       </Draggable>
      );
    })
  }
</Container>

this.state.items[i]}
>
{
this.state.items.map（（element，i）=>{
const component=createComponent（元素，类型\工具栏）；
返回(
{component}
);
})
}

和我的第二个容器（编辑器）：

this.state.items[i]}
onDrop={e=>this.setState({
items:applyDrag（this.state.items，e）
})}
lockAxis=“y”
dragHandleSelector=“.element拖动处理程序”
>
{
this.state.items.map（（元素，i）=>{
const component=createComponent(
要素
键入编辑器，
此.element工具栏处理程序
);
返回(
{component}
);
})
}

我认为您正在寻找的是reactCloneElement，它允许您获取组件并更改其道具。 使用此函数时要小心，因为它会保留克隆元素的引用

这里是我对一个可能实现的尝试

const applyDrag = e => {

 const {items} = this.state
 // you get your element
 const element = e. ???? 

 // Then you recreate it and changing his id 
 const item = React.cloneElement(
  element,
  {
   id: shortid.generate(),
   ...element.props,
  },
)

 this.setState({items: items.length > 0 ? items.concat(item) : [].concat(item)})
}

<Container
    groupName="1"
    getChildPayload={i => this.state.items[i]}
    onDrop={this.applyDrag(e)}
    lockAxis="y"
    dragHandleSelector=".element-drag-handler"
>
    {
        this.state.items.map((element, i) => {
            const component = createComponent(
                element,
                TYPE_EDITOR,
                this.elementToolBarHandler
            );

            return (
                <Draggable key={i}>
                    {component}
                </Draggable>
            );
        })
    }

const applyDrag=e=>{
const{items}=this.state
//你得到你的元素
常数元素=e？？？？
//然后重新创建并更改他的id
const item=React.cloneElement(
要素
{
id:shortid.generate（），
…元素。道具，
},
)
this.setState（{items:items.length>0？items.concat（item）：[].concat（item）}）
}
this.state.items[i]}
onDrop={this.applyDrag（e）}
lockAxis=“y”
dragHandleSelector=“.element拖动处理程序”
>
{
this.state.items.map（（元素，i）=>{
const component=createComponent(
要素
键入编辑器，
此.element工具栏处理程序
);
返回(
{component}
);
})
}

好吧，我尝试了几种方法，如果您不想使用

reactCloneElement

克隆元素，您可以执行以下操作

在我的第一个容器（工具栏）中，我创建了一个

onDragStart

回调：

onDragStart={e => this.onDragStart(e)}

功能实现：

updateId(element) {
    let index = this.state.items.findIndex(x => x.id === element.id);
    if (index === -1) index = 1;
    this.setState(update(this.state, {
        items: {
            [index]: {
                $merge: {
                    id: shortid.generate()
                }
            }
        }
    }));
}

onDragStart({payload}) {
    this.updateId(payload);
}

updateId(element) {
    let index = this.state.items.findIndex(x => x.id === element.id);
    if (index === -1) index = 1;
    this.setState(update(this.state, {
        items: {
            [index]: {
                $merge: {
                    id: shortid.generate()
                }
            }
        }
    }));
}

onDragStart({payload}) {
    this.updateId(payload);
}