代码之家 › 专栏 › 技术社区 › tic

react Dragable无法使用自定义组件

reactjs javascript

tic · 技术社区 · 6 年前

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>
    );
  }
}

h1 由于直接使用,它现在使用自定义组件 Test

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

我试着转发参考文献。我也试着把它包装在一个信封里 Fragment

1 回复 | 直到 6 年前

Matt Carlotta 6 年前

用包装纸包装组件 div 里面 DraggableCore :

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

Allen Vawdrey 4 年前

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>
  );
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前