如何更改复制元素的 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 => {&nbsp;const {items} = this.state&nbsp;// you get your element&nbsp;const element = e. ????&nbsp;&nbsp;// Then you recreate it and changing his id&nbsp;&nbsp;const item = React.cloneElement(&nbsp; element,&nbsp; {&nbsp; &nbsp;id: shortid.generate(),&nbsp; &nbsp;...element.props,&nbsp; },)&nbsp;this.setState({items: items.length > 0 ? items.concat(item) : [].concat(item)})}<Container&nbsp; &nbsp; groupName="1"&nbsp; &nbsp; getChildPayload={i => this.state.items[i]}&nbsp; &nbsp; onDrop={this.applyDrag(e)}&nbsp; &nbsp; lockAxis="y"&nbsp; &nbsp; dragHandleSelector=".element-drag-handler">&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; this.state.items.map((element, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const component = createComponent(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TYPE_EDITOR,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.elementToolBarHandler&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Draggable key={i}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {component}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Draggable>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }