打字稿：扩展div元素的属性在react ref上失败

Question

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

当我将isDragging 属性添加到一个简单的 div 元素时，我遇到了麻烦。为了解决这个问题，我正在构建一个具有扩展属性的组件，遵循

Specify specific props and accept general HTML props in Typescript React App

这在某种程度上有效，但在 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'.

任何想法，有没有其他方法可以解决这个问题？

Answer 1

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

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

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

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

然后，通过为您拥有的 DragDiv 创建您自己的 ref 属性，这可能会解决 react-beautiful-dnd 问题：

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}
          ...

看看这是否能解决你的问题。