如何更改复制元素的 ID

Question

我尝试使用 react-smooth-dnd 创建 dnd 编辑器。我有 2 个容器：第一个是带有元素的工具栏，第二个是编辑器。每个元素具有以下结构：{ 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>我的第二个容器（编辑器）：<Container    groupName="1"    getChildPayload={i => this.state.items[i]}    onDrop={e => this.setState({        items: applyDrag(this.state.items, 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>            );        })    }</Container>

Answer 1

我认为您正在寻找的是 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>

            );

        })

    }