Typescript: расширение свойств элемента div не срабатывает при реагировании - PullRequest
Новая
       23

Typescript: расширение свойств элемента div не срабатывает при реагировании

0 голосов
/ 11 октября 2019

Я работаю над сценарием перетаскивания с помощью response-beautiful-dnd, пытаюсь добавить анимацию отбрасывания, следуя инструкции https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md.

При использовании машинописи у меня возникают проблемы при добавлении isDragging свойство простого элемента div. Пытаясь обойти эту проблему, я строил компонент с расширенными свойствами, следуя

Укажите конкретные реквизиты и принимайте общие реквизиты HTML в приложении Typescript React

Это сработало для некоторыхуказывает на свойство 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'.

Есть идеи, есть ли другой способ решить эту проблему?

1 Ответ

0 голосов
/ 11 октября 2019

Вы должны иметь возможность использовать createRef () в своем коде следующим образом: 

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

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

Это упрощенно, но это должно исправить ошибку, с которой вы столкнулись.

Возможно, этоисправим это для реагирования-Beautiful-DDD, создав собственную опору для DragDiv: 

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

Посмотрим, исправит ли этоэто для вас.

...