如何将React类组件转为Hook组件？拖拽排序功能转换遇阻

转换关键点说明： #

1. 状态管理替换：用useState替代类组件的state，将nodes、checked、expanded拆分为独立状态变量（也可合并为一个对象，拆分更直观）。
2. 事件函数简化：无需手动绑定this，直接在组件内定义箭头函数更新状态，逻辑和类组件完全一致。
3. 修正数据导入错误：原代码中const nodesData = './data.json'仅赋值了文件路径，需改为正确导入JSON数据。

转换后的Hook组件代码 #

import React, { useState } from 'react';
import CheckboxTree from 'react-checkbox-tree-reorderable';
// 正确导入JSON数据
import nodesData from './data.json';

function BasicExample() {
  // 初始化状态
  const [nodes, setNodes] = useState(nodesData);
  const [checked, setChecked] = useState([]);
  const [expanded, setExpanded] = useState([]);

  // 复选框选中事件
  const onCheck = (newChecked) => {
    setChecked(newChecked);
  };

  // 节点展开/收起事件
  const onExpand = (newExpanded) => {
    setExpanded(newExpanded);
  };

  // 拖拽排序后的节点更新事件
  const onOrderChange = (orderedNodes) => {
    setNodes(orderedNodes);
  };

  // 直接返回JSX，无需render方法
  return (
    <CheckboxTree
      checked={checked}
      expanded={expanded}
      iconsClass="fa5"
      nodes={nodes}
      onCheck={onCheck}
      onExpand={onExpand}
      orderable
      onOrderChange={onOrderChange}
    />
  );
}

export default BasicExample;

额外说明 #

如果希望保持类组件中合并状态的写法，也可以用单个useState管理：

const [state, setState] = useState({
  nodes: nodesData,
  checked: [],
  expanded: []
});

// 对应事件函数修改为：
const onCheck = (newChecked) => {
  setState(prev => ({ ...prev, checked: newChecked }));
};

const onExpand = (newExpanded) => {
  setState(prev => ({ ...prev, expanded: newExpanded }));
};

const onOrderChange = (orderedNodes) => {
  setState(prev => ({ ...prev, nodes: orderedNodes }));
};

这种写法更贴近原类组件的状态结构，但拆分状态在更新时更简洁。

内容的提问来源于stack exchange，提问作者jatin vijay