我正在尝试使用 react-beautiful-dnd 创建一个非常简单的可拖动元素列表。当我尝试使用快照并分配 snapshot.isDragging 的值时,出现错误。
然后我试图给它一个一般的布尔值,仍然出现错误。
我收到一个打字稿错误,说该属性不存在。
29 | {(provided, snapshot) => (
30 | <Container
> 31 | isDragging={false}
| ^
32 | ref={provided.innerRef}
33 | {...provided.draggableProps}
34 | {...provided.dragHandleProps}
下面代码的最终目标(不起作用的部分):是将 isDragging 属性从快照传递到容器,以便我可以在其上使用样式组件。
样式化的组件部分正在工作(当我在第 31 行弄乱真/假时,我可以看到它改变了颜色)
import React, { Component } from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";
interface Props {
rowEntry?: any;
index: number;
}
interface State {}
const Container = styled.div`
border:1px solid lightgrey;
border-radius:2px;
padding 8px;
margin-bottom:8px;
background-color: ${(props: any) =>
props.isDragging ? "lightgreen" : "white"};
`;
class AssetRow extends Component<Props, State> {
state = {};
render() {
return (
<Draggable
draggableId={this.props.rowEntry.id.toString()}
index={this.props.index}
>
{(provided, snapshot) => (
<Container
isDragging={false}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{this.props.rowEntry.itemName}
</Container>
)}
</Draggable>
);
}
}
export default AssetRow;
但是,他们是在 javascript 中进行的。