Reactjs 无法使用“反应图像裁剪”裁剪图像

我正在尝试使用react image crop（）裁剪图像。实际上，我不能移动裁剪区域或拉伸它。我还使用DragZone上传图像。你能解释一下我做错了什么，有什么问题吗？还将导入React图像裁剪css。有人能帮忙吗

import React，{useCallback}来自“React”
从“react dropzone”导入{useDropzone}
从“反应图像裁剪”导入反应裁剪
从“react dom”导入react dom；
导入'react image crop/dist/ReactCrop.css'；
导入“./Styles/ImageUpload.css”
函数ImageUpload（文件、添加文件）{
常数作物={
残疾人士:错,，
锁定：错误，
单位：“px”，//默认值，可以是“px”或“%”
x:130，
y:50，
宽度：200，
身高：200
}
const onCrop=（图像、像素裁剪、文件名）=>{
}
常量onImageLoaded=（图像）=>{
}
const onCropComplete=异步裁剪=>{
}
const onDrop=useCallback（（acceptedFiles，rejectedFiles）=>{
if（Object.keys（rejectedFiles）.length！==0）{
}
否则{
files.addFile（acceptedFiles）；
让popubody=document.getElementsByClassName（“弹出容器”）[0]；
popubody.innerHTML=“”；
让cropElement=（）；
ReactDOM.render（cropElement、PopubBody）；
}, [])
const{getRootProps，getInputProps，isDragActive}=useDropzone（{onDrop，noKeyboard:true}）
返回(
上传新照片

{  
(() => {
如果（files.length==未定义）{
返回(
选择文件或将其拖动到此处
)
} 
否则{
}
})()}
)
}

我不确定为什么要在函数中执行

ReactDom.render

。这似乎与React相反，并且猜测库没有正确绑定事件

我建议，在用户删除图像后，使用文件读取器加载图像，并将其设置为状态，然后更改显示以显示

。

裁剪

也需要处于状态，以便在其更改时更新裁剪矩形

---

以下是创建者自己的一个工作示例：

我也面临同样的问题，您试图在crop属性中添加禁用、锁定的，但它无效，因为crop属性采用以下值：

{
  unit: 'px', // default, can be 'px' or '%'
  x: 130,
  y: 50,
  width: 200,
  height: 200
}

---

要解决此问题，请将添加禁用锁定为组件中的道具，而不是作物属性。

能否显示禁用的用法？

{
  unit: 'px', // default, can be 'px' or '%'
  x: 130,
  y: 50,
  width: 200,
  height: 200
}