[英]Convert React class component to React Hook
我试图将以下代码转换为反应钩子组件,但我不明白如何将渲染部分中的 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"
]
}
]
}
]
}
]
通过下面的代码参考这个和 go ..
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.