reactjs - 如何将 subColors 作为数据添加到我的 React 组件
问题描述
我正在尝试修改此示例https://www.telerik.com/kendo-react-ui/components/sortable/nesting/通过制作我自己的示例,该示例将在容器中插入第三个可拖动组件,其颜色名称为 subColor . 目前我的尝试失败了,因为我Cannot read properties of undefined (reading 'map')
在这一行得到了这个错误 const [subColors, setSubColors] = React.useState()
为什么以及如何将 subColor 数据传递给SecondNestedSortableUI
本示例中的组件?这是我的代码:
import * as React from "react";
import { Sortable } from "@progress/kendo-react-sortable";
const SecondNestedSortableUI = (props) => {
const { style, attributes, dataItem, forwardRef, isActive } = props;
const [subColors, setSubColors] = React.useState(
props.dataItem.data.map((item) => ({
id: item,
name: item,
}))
);
<div
ref={forwardRef}
{...attributes}
style={{
...style,
border: isActive ? "2px dashed black" : 0,
paddingTop: 1,
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 2,
}}
>
<div
style={{
backgroundColor: dataItem.color,
color: "white",
height: 100,
border: "1px solid black",
}}
>
{dataItem.name}
</div>
</div>
}
const NestedSortableUI = (props) => {
const { style, attributes, dataItem, forwardRef, isActive } = props;
return (
<div
ref={forwardRef}
{...attributes}
style={{
...style,
border: isActive ? "2px dashed black" : 0,
paddingTop: 1,
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 2,
}}
>
<div
style={{
backgroundColor: dataItem.color,
color: "white",
height: 100,
border: "1px solid black",
}}
>
<Sortable
data={subColorsA}
idField={"colorId"}
itemUI={SecondNestedSortableUI}
/>
</div>
</div>
);
};
const SortableItemUI = (props) => {
const [colors, setColors] = React.useState(
props.dataItem.data.map((item) => ({
colorId: item,
color: item,
}))
);
const onDragOver = (event) => {
setColors(event.newState);
};
const onNavigate = (event) => {
setColors(event.newState);
};
const { style, attributes, dataItem, forwardRef } = props;
return (
<div
ref={forwardRef}
{...attributes}
style={{
...style,
float: "left",
display: "inline-block",
width: 125,
backgroundColor: "#fffaed",
margin: 4,
border: "1px solid black",
}}
>
{dataItem.name}
<Sortable
idField={"colorId"}
data={colors}
itemUI={NestedSortableUI}
onDragOver={onDragOver}
onNavigate={onNavigate}
/>
</div>
);
};
const colorsA = ["Violet", "Magenta", "Purple", "SlateBlue"];
const subColorsA = ["Sub1", "Sub2", "Sub3", "Sub4"];
const App = () => {
const [palettes, setPalettes] = React.useState([
{
data: colorsA,
name: "Palette A",
id: 1,
}
]);
const [secondColors, setSecondColors] = React.useState([
{
data: subColorsA,
name: "Subcolors A",
id: 1
}
])
const onDragOver = (event) => {
setPalettes(event.newState);
};
const onNavigate = (event) => {
setPalettes(event.newState);
};
return (
<Sortable
idField={"id"}
data={palettes}
itemUI={SortableItemUI}
onDragOver={onDragOver}
onNavigate={onNavigate}
/>
);
};
export default App
解决方案
推荐阅读
- angular - 无法在 Http 拦截器和主组件 Angular 2、Angular 6 中使用 Ng2-Translate 翻译键
- amazon-eks - 使用 eksctl 设置时无法使用 ssh 访问 EKS 工作程序节点
- javascript - 如何解决删除EventListener失败?
- git - 如何在已提交的提交上更改身份 GitHub
- javascript - 来自附加 javascript 的 PHP POST 元素
- javascript - 无法将元素添加到列表中
- selenium-grid - Selenium Grid:使用具有不同 Windows 登录的 Node 机器时,chrome 驱动程序未运行
- visual-studio - SSRS ReportViewer 不工作,只显示一个随机 GUID
- angular - 此字段在 Angular 表单提交中是必需的
- laravel - 用户无法在 laravel 中发表评论