0

我正在使用 react-beautiful-dnd 处理拖放场景，尝试按照手册https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/添加拖放动画拖放动画.md。

isDragging当我将属性添加到一个简单的 div 元素时，使用 typescript 我遇到了麻烦。试图解决这个问题，我正在构建一个具有扩展属性的组件，如下

在 Typescript React App 中指定特定的道具并接受一般的 HTML 道具

这在某种程度上有效，但在 ref 属性上失败了。

我的代码：

interface IdragDiv extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
  isDragging: boolean;
}
export class DragDiv extends React.Component<IdragDiv> {
  render() {
    const { children, ...rest } = this.props;
    return <div {...rest}>{children}</div>;
  }
}

像这样称呼它：

...
          return (
            <Draggable
              draggableId={...}
            >
              {(provided, snapshot) => {
                return (
                  <DragDiv
                    {...className}
                    ref={provided.innerRef}
                    {...provided!.draggableProps}
                    {...provided!.dragHandleProps}
                    isDragging={snapshot.isDragging && !snapshot.isDropAnimating}
                  >
                    ...
                  </DragDiv>
                );
              }}
            </Draggable>
          );
...

这会导致以下错误：

(property) ref?: (string & ((instance: HTMLDivElement | null) => void)) | (string & React.RefObject<HTMLDivElement>) | (((instance: DragDiv | null) => void) & ((instance: HTMLDivElement | null) => void)) | ... 4 more ... | undefined

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<IdragDiv>): DragDiv', gave the following error.
    Type '(element?: HTMLElement | null | undefined) => any' is not assignable to type '(string & ((instance: HTMLDivElement | null) => void)) | (string & RefObject<HTMLDivElement>) | (((instance: DragDiv | null) => void) & ((instance: HTMLDivElement | null) => void)) | ... 4 more ... | undefined'.
      Type '(element?: HTMLElement | null | undefined) => any' is not assignable to type 'string & ((instance: HTMLDivElement | null) => void)'.
        Type '(element?: HTMLElement | null | undefined) => any' is not assignable to type 'string'.
  Overload 2 of 2, '(props: IdragDiv, context?: any): DragDiv', gave the following error.
    Type '(element?: HTMLElement | null | undefined) => any' is not assignable to type '(string & ((instance: HTMLDivElement | null) => void)) | (string & RefObject<HTMLDivElement>) | (((instance: DragDiv | null) => void) & ((instance: HTMLDivElement | null) => void)) | ... 4 more ... | undefined'.
      Type '(element?: HTMLElement | null | undefined) => any' is not assignable to type 'string & ((instance: HTMLDivElement | null) => void)'.
        Type '(element?: HTMLElement | null | undefined) => any' is not assignable to type 'string'.

任何想法，有没有另一种方法来解决这个问题？

4

1 回答 1

-2

您应该能够像这样在代码中使用 createRef() ：

class Foo extends Component {
  private myRef = createRef<HTMLDivElement>();

  render() {
    return <div ref={this.myRef} />
  }
}

这是简化的 ofc，但这应该可以解决您遇到的错误。

可能这将为 react-beautiful-dnd 修复它，然后通过为您拥有的 DragDiv 创建自己的 ref 道具：

class DragDiv extends React.Component {
  render() {
    return (
      <div {...this.props} ref={this.props.innerRef}></div>
    );
  }
}

然后在你的 Draggable 中：

return (
  <Draggable draggableId={...}>
    {(provided, snapshot) => {
      return (
        <DragDiv
          {...className}
          innerRef={provided.innerRef}
          ...

看看这是否为您解决了问题。

于 2019-10-11T10:03:38.377 回答