在 react-beautiful-dnd 中通过快照时打字稿类型错误

Question

我正在尝试使用 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;

我大致遵循了这个指南：https://egghead.io/lessons/react-customise-the-appearance-of-an-app-during-a-drag-using-react-beautiful-dnd-snapshot-values

但是，他们在 javascript 中这样做。

Answer 1

如果有人遇到这个问题，那是因为 styled-components。这就是我修复它的方法：

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 组件创建一个接口，以便我可以告诉 Container isDragging 是一个布尔值。

在 react-beautiful-dnd 中通过快照时打字稿类型错误

typescript type error when passing through snapshot in react-beautiful-dnd

reactjs

typescript

react-beautiful-dnd