在react-beautiful dnd中通过快照时出现typescript类型错误
在react-beautiful dnd中通过快照时出现typescript类型错误
提问于 2020-08-29 08:35:09
我正在尝试使用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行处理true/false时，我可以看到它改变了颜色)
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。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-31 05:00:01
如果有人遇到这个问题，那是因为样式化组件。这是我为修复它所做的：
interface ContainerProps {
readonly isDragging: boolean;
}
const Container = styled.div<ContainerProps>`
border:1px solid lightgrey;
border-radius:2px;
padding 8px;
margin-bottom:8px;
background-color: ${(props) => (props.isDragging ? "lightgreen" : "white")};
`;我必须为styled.div组件创建一个接口，以便告诉容器isDragging是一个布尔值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63642380
复制相关文章
相似问题
腾讯云开发者
