英文:
Convert Class component to functional component - react calendar timeline
问题
我有一个React日历时间轴npm包的示例。这是使用类组件开发的，有人可以帮助我将其转换为在React中使用函数组件吗？我对React还很陌生，所以无法在函数组件中使其工作。
示例链接：
https://codesandbox.io/s/r1mxzj581m
英文:
I have an example of React Calendar Timeline npm. This is developed with Class component can someone help me to convert this to use functional component in React. I am new to react so couldn't make it work with functional component.
Example link:
https://codesandbox.io/s/r1mxzj581m
答案1
得分: 1
以下是功能组件的工作沙盒链接。
import React, { useState } from "react";
import moment from "moment";
import Timeline from "react-calendar-timeline";
import generateFakeData from "./generate-fake-data";
const keys = {
groupIdKey: "id",
groupTitleKey: "title",
groupRightTitleKey: "rightTitle",
itemIdKey: "id",
itemTitleKey: "title",
itemDivTitleKey: "title",
itemGroupKey: "group",
itemTimeStartKey: "start",
itemTimeEndKey: "end",
groupLabelKey: "title"
};
const App = () => {
const { groups: initialGroups, items: initialItems } = generateFakeData();
const defaultTimeStart = moment().startOf("day").toDate();
const defaultTimeEnd = moment().startOf("day").add(1, "day").toDate();
// 将每3个组中的2个转换为节点，将第一个保留为根节点
const newGroups = initialGroups.map((group) => {
const isRoot = (parseInt(group.id) - 1) % 3 === 0;
const parent = isRoot
? null
: Math.floor((parseInt(group.id) - 1) / 3) * 3 + 1;
return { ...group, root: isRoot, parent };
});
const [groups, setGroups] = useState(newGroups);
const [items] = useState(initialItems);
const [openGroups, setOpenGroups] = useState({});
const toggleGroup = (id) => {
setOpenGroups((prevOpenGroups) => ({
...prevOpenGroups,
[id]: !prevOpenGroups[id]
}));
};
// 隐藏（过滤）已关闭的组，对于其余的组，修补它们的“title”并添加一些回调或填充
const filteredGroups = groups.filter((g) => g.root || openGroups[g.parent]);
const newGroupsToShow = filteredGroups.map((group) => {
return {
...group,
title: group.root ? (
<div
onClick={() => toggleGroup(parseInt(group.id))}
style={{ cursor: "pointer" }}
>
{openGroups[parseInt(group.id)] ? "[-]" : "[+]"} {group.title}
</div>
) : (
<div style={{ paddingLeft: 20 }}>{group.title}</div>
)
};
});
return (
<Timeline
groups={newGroupsToShow}
items={items}
keys={keys}
sidebarWidth={150}
canMove
canResize="right"
canSelect
itemsSorted
itemTouchSendsClick={false}
stackItems
itemHeightRatio={0.75}
showCursorLine
defaultTimeStart={defaultTimeStart}
defaultTimeEnd={defaultTimeEnd}
/>
);
};
export default App;
英文:
Here is the working sandbox link for functional component.
import React, { useState } from "react";
import moment from "moment";
import Timeline from "react-calendar-timeline";
import generateFakeData from "./generate-fake-data";
const keys = {
groupIdKey: "id",
groupTitleKey: "title",
groupRightTitleKey: "rightTitle",
itemIdKey: "id",
itemTitleKey: "title",
itemDivTitleKey: "title",
itemGroupKey: "group",
itemTimeStartKey: "start",
itemTimeEndKey: "end",
groupLabelKey: "title"
};
const App = () => {
const { groups: initialGroups, items: initialItems } = generateFakeData();
const defaultTimeStart = moment().startOf("day").toDate();
const defaultTimeEnd = moment().startOf("day").add(1, "day").toDate();
// convert every 2 groups out of 3 to nodes, leaving the first as the root
const newGroups = initialGroups.map((group) => {
const isRoot = (parseInt(group.id) - 1) % 3 === 0;
const parent = isRoot
? null
: Math.floor((parseInt(group.id) - 1) / 3) * 3 + 1;
return { ...group, root: isRoot, parent };
});
const [groups, setGroups] = useState(newGroups);
const [items] = useState(initialItems);
const [openGroups, setOpenGroups] = useState({});
const toggleGroup = (id) => {
setOpenGroups((prevOpenGroups) => ({
...prevOpenGroups,
[id]: !prevOpenGroups[id]
}));
};
// hide (filter) the groups that are closed, for the rest, patch their "title" and add some callbacks or padding
const filteredGroups = groups.filter((g) => g.root || openGroups[g.parent]);
const newGroupsToShow = filteredGroups.map((group) => {
return {
...group,
title: group.root ? (
<div
onClick={() => toggleGroup(parseInt(group.id))}
style={{ cursor: "pointer" }}
>
{openGroups[parseInt(group.id)] ? "[-]" : "[+]"} {group.title}
</div>
) : (
<div style={{ paddingLeft: 20 }}>{group.title}</div>
)
};
});
return (
<Timeline
groups={newGroupsToShow}
items={items}
keys={keys}
sidebarWidth={150}
canMove
canResize="right"
canSelect
itemsSorted
itemTouchSendsClick={false}
stackItems
itemHeightRatio={0.75}
showCursorLine
defaultTimeStart={defaultTimeStart}
defaultTimeEnd={defaultTimeEnd}
/>
);
};
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论