如何添加可拖动组件以响应应用

Question

我的src中目前有一个有效的拖放文件： 我希望能够将其实现到我的前端应用程序。 我将其添加到GameImage.js文件中，以便可以在前端拖动图像。我收到无法读取“地图属性”的错误。我认为我没有正确执行此操作。我还需要将其实施到“ App.js”文件中是否正确？

Dragger：

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'

    import './Dragger.css'
    const STATE_IDLE = 'idle'
    const STATE_DRAGGING = 'dragging'

    class Dragger extends Component {
      constructor(props) {
        super(props)
        this.state = {
          status: STATE_IDLE,
          anchorX: 0,
          anchorY: 0,
          angleX: 0,
          angleY: 0,
        }
      }

    //WONT RESTART
      componentDidMount() {
        document.addEventListener('mousemove', this.handleMouseMove)
        document.addEventListener('mouseup', this.handleMouseUp)
      }

      componentWillUnmount() {
        document.removeEventListener('mouseup', this.handleMouseUp)
        document.removeEventListener('mousemove', this.handleMouseMove)
      }

      handleMouseDown = event => {
        let option = document.getElementById(this.props.state)
        if (option) {
          const optionPosition = option.getBoundingClientRect()
          this.setState({
            anchorX: event.clientX,
            anchorY: event.clientY,
            angleX: event.clientX - optionPosition.left,
            angleY: event.clientY - optionPosition.top,
            status: STATE_DRAGGING,
          }, () => {
            this.props.onChange(`position ${optionPosition.left} ${optionPosition.top}`)
            this.props.onChange(`angle ${this.state.angleX} ${this.state.angleY}`)
          })
        } else {
          this.setState({
            anchorX: event.clientX,
            anchorY: event.clientY,
            status: STATE_DRAGGING
          })
        }


        this.props.onChange(`X angle: ${this.state.angleX}, Y angle: ${this.state.angleY}`)
      }

      handleMouseMove = event => {
        if (this.state.status === STATE_DRAGGING) {
          this.setState({
            anchorX: event.clientX,
            anchorY: event.clientY
          })
        }
      }

      handleMouseUp = event => {
        let drops = [].slice.call(document.getElementsByClassName("Drop"))
        if (event && drops && this.state.status === STATE_DRAGGING) {
          this.setState({
            anchorX: event.clientX,
            anchorY: event.clientY,
          })
          if (this.props.letsDragorDrop === "Drag" && drops.some(this.letsDrop)) {
            this.props.onChange(`state: ${this.props.state}`)
            this.props.delete(this.props.state)
          }
        }
        this.setState({status: STATE_IDLE})
      }

      letsDrop = (drop) => {

        this.props.onChange(`Left: ${drop.offsetLeft}, clientX: ${this.state.anchorX}, Right: ${drop.offsetLeft + drop.offsetWidth}`)
        this.props.onChange(`Top: ${drop.offsetTop}, clientY: ${this.state.anchorY}, Bottom: ${drop.offsetTop + drop.offsetHeight}`)

        const angleX = this.state.anchorX
        const angleY = this.state.anchorY + window.scrollY
        return (drop.offsetLeft < angleX &&
                angleX < drop.offsetLeft + drop.offsetWidth &&
                drop.offsetTop < angleY &&
                angleY < drop.offsetTop + drop.offsetHeight)
      }

render() {
    const {state} = this.props

    return (
      <div className="Dragger">
      {this.props.letsDragorDrop === "Drag" &&
        <div className="Drag" id={this.props.state} onMouseDown={this.handleMouseDown} style={this.optionDesign()}>
          {state}
        </div>
      }
      {this.props.letsDragorDrop === "Drop" &&
        <div className="Drop" id={this.props.state} style={this.optionDesign()}>
          {state}
        </div>
      }
      </div>
    )


     }
    }

    Dragger.propTypes = {
      state: PropTypes.string,
      letsDragorDrop: PropTypes.string,
      onChange: PropTypes.func,
      delete: PropTypes.func
    }
    export default Dragger

游戏图片：

import React, { Component } from 'react';
import SearchName from './SearchForm.js'
import Dragger from './Dragger.js'

class GameImage extends Component {
  constructor(props) {
    super(props)

    this.state = {
      show: false,
      game: this.props.game,
      image: this.props.image
    }
  }


  toggleDetails = () => {
    this.setState({
      show: !(this.state.show)
    })
  }

  formatImageUrl(url) {
    const width = '150'
    const height = '180'

    return url.replace('{width}', width).replace('{height}', height)
 }



 render() {
  const { game} = this.props

  const {viewers} = this.props

  const link = `https://www.twitch.tv/directory/game/${game.name}`;

  const image = this.formatImageUrl(game.box_art_url);

  return (
    <div>
    <div className="GameDetails">

        <img src={this.formatImageUrl(game.box_art_url)} alt=""  />
        <p>{game.name} </p>
        <p>ID: {game.id}</p>
        <p>{game.viewers} </p>

    </div>


    <div className="Drag">

          {this.state.image.map((image) =>
              <Dragger letsDragorDrop="Drag"  onChange={this.props.onChange} state={image} key={this.state.image.indexOf(image)}/>
          )}

        </div>
        </div>
  )
}
 }

 export default GameImage

我该如何将“ Dragger.js”文件中的Dragger组件应用于游戏图像文件中