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

【问题标题】：typescript type error when passing through snapshot in react-beautiful-dnd在 react-beautiful-dnd 中通过快照时出现打字稿类型错误
【发布时间】：2020-12-17 21:29:06
【问题描述】：

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

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

但是，他们是用 javascript 来做的。

【问题讨论】：

标签： reactjs typescript react-beautiful-dnd

【解决方案1】：

如果有人遇到这个问题，那是因为样式组件。这就是我修复它的方法：

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 是一个布尔值。

【讨论】：