javascript - 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

我已尝试转发引用文献。我还尝试将其包装在 Fragment

中

Answer 1

在 DraggableCore 内使用 div 包裹您的组件:

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