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属性从快照传递到Container中，以便可以在其上使用样式化组件。

样式化的组件部分正在工作（当我在第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

如果有人遇到此问题，那是因为样式组件。这是我要解决的问题：

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中通过快照时出现打字稿类型错误

1 个答案: