react-draggable 不适用于自定义组件

Question

https://github.com/mzabriskie/react-draggable

如何让自定义组件拖动？

点击后以下工作

import React from 'react';
import { DraggableCore } from 'react-draggable';

export default class Hello extends React.Component {

  onStart = () => {
    console.log('here');
  }

  render() {
    return (
      <DraggableCore
        onStart={this.onStart}
      >
        <h1>Drag me!</h1>
      </DraggableCore>
    );
  }
}

这不是

import React from 'react';
import { DraggableCore } from 'react-draggable';

class Test extends React.Component {
  render() {
    return (
      <h1>{this.props.children}</h1>
    );
  }
}

export default class Hello extends React.Component {

  onStart = () => {
    console.log('here');
  }

  render() {
    return (
      <DraggableCore
        onStart={this.onStart}
      >
        <Test>Drag me!</Test>
      </DraggableCore>
    );
  }
}

唯一的区别是它现在使用自定义组件Test，而不是直接使用h1

https://stackblitz.com/edit/react-ev9iyu?file=Hello.js

我已尝试转发 ref。我也尝试将其包装在 Fragment

Answer 1

在DraggableCore 内用div 包裹您的组件：

<DraggableCore onStart={this.onStart}>
  <div>
    <Test>Drag me!</Test>
  </div>
</DraggableCore>

Answer 2

我在这里玩游戏太晚了，但我希望这对某人有所帮助。你必须给你的组件一个休息道具。您需要这样做，因为 DraggableCore 复制组件并将多个事件侦听器放在组件上。查看 DraggableCore 的渲染。 https://github.com/react-grid-layout/react-draggable/blob/master/lib/DraggableCore.js。您的组件需要能够接收这些事件侦听器。

const Test = ({ children, ...rest }) => {
  return (
    <div {...rest}>{children}</div>
  )
}

const Hello = () => {
  const handleStart = () => console.log('here');

  return (
    <DraggableCore
      onStart={handleStart}
    >
      <Test>Drag me!</Test>
    </DraggableCore>
  );
}