react-cropper：未捕获TypeError：无法将类作为函数调用

Question

我正在开发一个使用react-cropper组件上传和裁剪图像的系统。

当我想要创建包含裁剪系统和预览的组件时，我会阻止。

这是我的容器：

 class PhotoContainer extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
         cropResult:null
      };
     this.changeImage = this.changeImage.bind(this);
     this.cropImage = this.cropImage.bind(this);
  }

  changeImage(e) {
    e.preventDefault();
    let files;
    if (e.dataTransfer) {
      files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }
    const reader = new FileReader();
    reader.onload = () => {
      this.setState({ src: reader.result });
    };
    reader.readAsDataURL(files[0]);
  }

    cropImage() {
    if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
      return;
    }
    this.setState({
      cropResult: this.cropper.getCroppedCanvas().toDataURL(),
    });
        console.log(this.cropper.getCroppedCanvas().toDataURL());
  }

    render() {
      var {selectedClub} = this.props;
        return (
          <div className="uploadImages">
            <div className="Image" style={{ width: '100%' }}>
              <br />
              <h3>Add Images</h3><br />
              <input type="file" multiple onChange={this.changeImage}/>
              <ClubCrop srcs={this.state.src} key="cropping" onClick={this.cropImage.bind(this)} cropper={cropper => { this.Cropper = cropper; }} crop={this.cropper}/>
            </div>
          </div>
      );
  }
}

我的组件：

export default props => {
  return (
    <div style={{ width: '50%'}}>
        <div className="inputImage" style={{ width: '5%', float: 'left' }}>
          <Cropper
          style={{height: 800, width: '100%'}}
          aspectRatio={4 / 3}
          preview=".img-preview"
          guides={false}
          src={props.srcs}
          ref={props.cropper}
          />
        </div>
        <div className="box" style={{ width: '50%', float: 'right' }}>
          <h3>Preview</h3>
          <div className="img-preview"  style={{ width: '100%', float: 'left', height: 300 }}></div>
        </div>
      <div className="cropButton">
        <button onClick={props.onClick}>Crop Image</button>
      </div>
    </div>
  );
}

谢谢！