使用反应挂钩将基于类的组件转换为功能组件[重复]

Posted 2023-02-22

【中文标题】使用反应挂钩将基于类的组件转换为功能组件[重复]

【英文标题】：Converting class based component to functional component using react hooks [duplicate]

【发布时间】：2020-05-18 17:24:31

【问题描述】：

我很难转换我的组件。我的主要困惑是useState。在我的基于类的组件中，使用this.setState 更新我的状态很容易，但是对于如何实现的钩子，我很困惑？

例如我可以这样做

onDrag = (event, item, currentDropZoneId, currentDropZoneItems) => 
event.preventDefault();
console.log("source", currentDropZoneId);
this.setState(
  dragSource: currentDropZoneId,
  draggedItem: item
);

;

然后在我的 JSX 中使用它

<Item
 draggable
 onDrag=event => this.onDrag(event, item, dropZone.id)
 ey=item.id
 />

如何使用钩子实现相同的功能？ this.setState 在 react hooks 中是什么意思？

【参考方案1】：

您有 2 个选项来实现使用钩子更新状态值：

第一个选项是声明 2 个状态变量（或更多，取决于组件的需要）

...
const [dragSource, setDragSource] = useState(...);
const [draggedItem, setDraggedItem] = useState(...);
...

const onDrag = (event, item, currentDropZoneId, currentDropZoneItems) => 
  event.preventDefault();
  console.log("source", currentDropZoneId);
  setDragSource(currentDropZoneId);
  setDraggedItem(item);


...

<Item
 draggable
 onDrag=event => onDrag(event, item, dropZone.id)
 ey=item.id
 />

第二种选择是为所有字段创建一个状态变量

...
const [state, setState] = useState(
  dragSource: ...,
  draggedItem: ...
);
...

const onDrag = (event, item, currentDropZoneId, currentDropZoneItems) => 
  event.preventDefault();
  console.log("source", currentDropZoneId);
  setState(
    dragSource: currentDropZoneId,
    draggedItem: item
  );


...

<Item
 draggable
 onDrag=event => onDrag(event, item, dropZone.id)
 ey=item.id
 />

请记住，在当前组件中调用函数时不再需要使用“this”关键字，因为组件不再是类，而是变成了函数。