如何在React JS中使用key访问div元素？(react-dnd)

npm install react-dnd --save

import { DragSource } from 'react-dnd';

const dragSource = {
  beginDrag(props) {
    return { id: props.id };
  }
};

function MyComponent(props) {
  const { connectDragSource } = props;
  return connectDragSource(
    <div key={props.id}>
      {/* div元素的内容 */}
    </div>
  );
}

export default DragSource('myItem', dragSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}))(MyComponent);

import { DropTarget } from 'react-dnd';

const dropTarget = {
  drop(props, monitor) {
    // 处理拖放完成后的逻辑
  }
};

function MyDropTarget(props) {
  const { connectDropTarget } = props;
  return connectDropTarget(
    <div>
      {/* 目标区域的内容 */}
    </div>
  );
}

export default DropTarget('myItem', dropTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
}))(MyDropTarget);

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

class App extends React.Component {
  render() {
    return (
      <div>
        <MyComponent id={1} />
        <MyDropTarget />
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(App);