將 React class 組件轉換為 React Hook

Question

我試圖將以下代碼轉換為反應鈎子組件，但我不明白如何將渲染部分中的 onOrderChange 和 const 轉換為反應鈎子，我該如何 go 關於這個？ 我的目標是擁有一個可拖放的反應復選框樹組件，但我無法將拖放部分轉換為反應鈎子，其他部分在反應鈎子中。

import React from 'react';
import CheckboxTree from 'react-checkbox-tree-reorderable';

const nodesData = './data.json'

class BasicExample extends React.Component {
    state = {
        nodes: nodesData,
        checked:[],
        expanded: [],
    };

    constructor(props) {
        super(props);

        this.onCheck = this.onCheck.bind(this);
        this.onExpand = this.onExpand.bind(this);
    }

    onCheck(checked) {
        this.setState({ checked });
    }

    onExpand(expanded) {
        this.setState({ expanded });
    }

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

    render() {
        const { onOrderChange, state } = this;
        const { checked, expanded, nodes } = state;

        return (
            <CheckboxTree
                checked={checked}
                expanded={expanded}
                iconsClass="fa5"
                nodes={nodes}
                onCheck={this.onCheck}
                onExpand={this.onExpand}
                orderable
                onOrderChange={onOrderChange}
            />
        );
    }
}

export default BasicExample;

這是我的數據。json 文件

[
        {
            "value": "polygon",
            "label": "Polygon",
            "type": "parent",
            "children": [
                {
                    "value": "ward",
                    "label": "Ward",
                    "type": "fill",
                    "source": {
                        "type": "geojson",
                        "data": "/Ward.json"
                    },
                    "id": "ward",
                    "paint": {
                        "fill-color": "red",
                        "fill-opacity": 0.2
                    },
                    "layout": {
                        "visibility": "none"
                    },
                    "filter": [
                        "all"
                    ]
                },
                {
                    "value": "zone",
                    "label": "Zone",
                    "type": "fill",
                    "source": {
                        "type": "geojson",
                        "data": "/Zone.json"
                    },
                    "id": "zone",
                    "paint": {
                        "fill-color": "blue",
                        "fill-opacity": 0.2
                    },
                    "layout": {
                        "visibility": "none"
                    },
                    "filter": [
                        "all"
                    ]
                }
            ]
        },
        {
            "value": "line",
            "label": "Line",
            "type": "parent",
            "children": [
                {
                    "value": "path",
                    "label": "Path",
                    "type": "parent",
                    "children": [
                        {
                            "value": "roads",
                            "label": "Roads",
                            "type": "line",
                            "source": {
                                "type": "geojson",
                                "data": "/Roads.json"
                            },
                            "id": "roads",
                            "paint": {
                                "line-color": "orange"
                            },
                            "layout": {
                                "visibility": "none"
                            },
                            "filter": [
                                "all"
                            ]
                        },
                        {
                            "value": "footpaths",
                            "label": "Footpaths",
                            "type": "line",
                            "source": {
                                "type": "geojson",
                                "data": "/Footpaths.json"
                            },
                            "id": "footpaths",
                            "paint": {
                                "line-color": "pink"
                            },
                            "layout": {
                                "visibility": "none"
                            },
                            "filter": [
                                "all"
                            ]
                        }
                    ]
                },
                {
                    "value": "drainage",
                    "label": "Drainage",
                    "type": "parent",
                    "children": [
                        {
                            "value": "waste",
                            "label": "Waste",
                            "type": "line",
                            "source": {
                                "type": "geojson",
                                "data": "/Waste.json"
                            },
                            "id": "waste",
                            "paint": {
                                "line-color": "brown"
                            },
                            "layout": {
                                "visibility": "none"
                            },
                            "filter": [
                                "all"
                            ]
                        },
                        {
                            "value": "storm",
                            "label": "Storm",
                            "type": "line",
                            "source": {
                                "type": "geojson",
                                "data": "/Storm.json"
                            },
                            "id": "storm",
                            "paint": {
                                "line-color": "green"
                            },
                            "layout": {
                                "visibility": "none"
                            },
                            "filter": [
                                "all"
                            ]
                        }
                    ]
                }
            ]
        }
    ]

Answer 1

通過下面的代碼參考這個和 go ..

https://olinations.medium.com/10-steps-to-convert-a-react-class-component-to-a-functional-component-with-hooks-ab198e0fa139

import React, { useState } from "react";
import CheckboxTree from "react-checkbox-tree-reorderable";

const nodesData = "./data.json";

const BasicExample = () => {
  const [checked, setChecked] = useState("");
  const [expanded, setExpand] = useState("");
  const [nodes, setOrderNodes] = useState(nodesData);

  const onCheck = (checked) => setChecked(checked);

  const onExpand = (expanded) => setExpand(expanded);

  const onOrderChange = (orderedNodes) => setOrderNodes(orderedNodes);

  return (
    <CheckboxTree
      checked={checked}
      expanded={expanded}
      iconsClass="fa5"
      nodes={nodes}
      onCheck={onCheck}
      onExpand={onExpand}
      orderable
      onOrderChange={onOrderChange}
    />
  );
};

export default BasicExample;