标签: react-dnd

我尝试在我的 React Web 应用程序中使用 react dnd。我创建了一个 js 文件调用withDnDContext.js。当我编译它时，我收到一个错误'react-dnd' does not contain an export named 'DragDropContext'。我的 react-dnd 版本是最新的 9.3.2

这是我的 withDnDContext.js

import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

export default DragDropContext(HTML5Backend);

有谁知道如何解决这个问题？

我正在尝试创建一个具有拖放项目功能的待办事项应用程序。我正在使用React DND并且到目前为止一切正常，但是当将新项目添加到列表中时，我意识到useDrop 中的“drop”方法中调用的函数只会使用页面首次加载时的状态向上。没有其他组件存在此问题，当我尝试使用简单的 onClick 来检查同一组件的状态时，也会记录正确的状态。其他组件（例如插入新任务的组件）根本没有问题，这只发生在使用React DND的组件上。我还检查了 Chrome 中的 React 开发工具，可以确认状态也在更新。
在“drop”中调用的函数是从两个组件向上传递的，我尝试使用的状态也在该组件中。任何帮助将不胜感激。谢谢。

export const ToDo = ({
  status,
  todoText,
  todoID,
  deleteTodo,
  updateTodoStatus,
  resortList,
}: TodoProps) => {
  const [, drag] = useDrag(() => ({
    type: 'TODO_DRAG',
    item: { todoID, todoText },
  }));

  const [, drop] = useDrop(() => ({
    accept: 'TODO_DRAG',
    drop: (droppedTodo: dropAndDropItem) => {
      console.log('dropping');
      if (todoID === droppedTodo.todoID) return;
      resortList(todoID, droppedTodo.todoID);
    },
  }));

  return (
    <li ref={drop} onClick={() => resortList(1, 2)}>
      <div …

我试图在我的项目中包含漂亮的 dnd 包，但在安装该包时出现错误。

请告诉我是否有任何其他类似的包或此错误的解决方案。

在我的 React Web 应用程序中，我想

1. 将项目从左侧的MUI TreeView拖动到右侧的放置目标之一
2. 在放置目标之间拖放项目

用户界面模型：

第二部分已经可以工作了。

至于第一部分，我确实设法使它们可拖动（遵循React DnD 基本示例），并且我可以将它们从树视图拖动到放置目标中：

const DraggableTreeItem = (props: TreeItemProps) => {
  const [{ isDragging }, drag] = useDrag({
    collect: (monitor: DragSourceMonitor) => ({
      isDragging: monitor.isDragging()
    }),
    item: props,
    type: MyDnDItemType
  })
  return (
    <TreeItem ref={drag} {...props}/>
  )
}

export default DraggableTreeItem;

我的问题：我希望树视图中的项目看起来与放置目标中的项目相同，以保持一些“UI 一致性”，即在视觉上立即明显看出这些项目是相同的：而不仅仅是 MUI“内置-在“简单的字符串中，我想要带有彩色图标（和字符串）的相同项目框：在我看来，理想情况下我应该在整个过程中使用相同的组件。

我已经搞乱了MUI TreeView 文档中的ContentComponent 属性示例，但在我看来，当我采用这种方法时，我需要重新实现（即重复）许多内置树功能（扩展节点） 、折叠、选择等）。

我还尝试理解 MUI TreeView 文档Gmail 克隆示例，但其中似乎有太多不相关的内容，以至于我看不到所有树木的森林。另外，我不确定这个 MUIstyled(TreeItem)(({ theme })概念是否旨在实现我想要实现的目标。

我的问题：如何使用我自己的（可拖动）组件作为树视图项？

我正在使用React DnD和Redux(使用Kea)来构建formbuilder.我的拖放部分运行得很好,我已经设法在元素掉落时调度一个动作,然后我使用调度更改的状态渲染构建器.但是,为了以正确的顺序渲染元素,我(我想)我需要保存相对于它的兄弟姐妹的丢弃元素位置,但我无法弄清楚任何不是绝对疯狂的东西.我已尝试使用refs并使用唯一ID查询DOM(我知道我不应该),但这两种方法都非常糟糕,甚至无法工作.

这是我的app结构的简化表示:

@DragDropContext(HTML5Backend)
@connect({ /* redux things */ })
<Builder>
  <Workbench tree={this.props.tree} />
  <Sidebar fields={this.props.field}/>
</Builder>

工作台:

const boxTarget = {
  drop(props, monitor, component) {
    const item = monitor.getItem()
    console.log(component, item.unique, component[item.unique]); // last one is undefined
    window.component = component; // doing it manually works, so the element just isn't in the DOM yet

    return {
      key: 'workbench',
    }
  },
}

@DropTarget(ItemTypes.FIELD, boxTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}))
export default class Workbench extends …

我正在按照教程进行操作，但意外收到此错误，有人知道发生了什么吗？

这是完整的错误：

React_devtools_backend.js:2557 React-beautiful-dnd：遇到设置问题。> 不变失败：provided.innerRef 尚未随 HTMLElement 一起提供。您可以在以下位置找到有关使用innerRef回调函数的指南： https: //github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

可删除代码：

render() {
        const { column, clients } = this.props;
        return (
            <Container>
                <Title>{column.name}</Title>
                <Droppable droppableId={column.id}>
                    {(provided) => (
                        <TaskList
                            innerRef={provided.innerRef}
                            {...provided.droppableProps}
                        >
                            {clients.map((client, idx) => (
                                <Task
                                    key={client.id}
                                    client={client}
                                    index={idx}
                                />
                            ))}
                            {provided.placeholder}
                        </TaskList>
                    )}
                </Droppable>
            </Container>
        );
    }

可拖动代码：

    render() {
        const { client, index } = this.props;
        return (
            <Draggable draggableId={client.id} index={index}>
                {(provided) => (
                    <Container
                        innerRef={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        {client.name}
                    </Container>
                )}
            </Draggable>
        );
    }

谢谢你！！！

遇到奇怪的错误，目前无法通过。所以当我运行测试时控制台会抛出：

/var/www/html/node_modules/react-dnd/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './core/index.js';
                                                                                  ^^^^^^


SyntaxError: Unexpected token 'export'

我用谷歌搜索。人们正在讨论并说应该添加模块映射器，所以我在 jest 配置中添加了以下代码：

'^react-dnd$': '<rootDir>/node_modules/react-dnd/dist/cjs',
'^react-dnd-html5-backend$': '<rootDir>/node_modules/react-dnd-html5-backend/dist/cjs',
'^dnd-core$': '<rootDir>/node_modules/dnd-core/dist/cjs',

抛出另一个错误：

 Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^react-dnd$/": "react-dnd/dist/cjs"
      },
      "resolver": undefined
    }

如果有人用react-dnd解决了这个问题，请帮助我！:))

我正在尝试使用 Rails5、action Cable、React 和 Rails 以及 React DnD 制作 POC。

目的是制作一个类似于 trello 的应用程序，但用于招聘过程。

我的前端是 ReactJS。

我有 3 个组件，首先，容器调用“Candidates”，这个组件调用 2 个调用“Card”组件的“CardBoard”组件。

我用户反应 DnD 库用于可拖动卡片和可放置 CardBoard。当我将卡片放在纸板上时，我使用 post call 和 websocket（来自 rails5 的动作电缆）来更新我的状态。我不明白为什么我在 post call 后收到这条消息：

Uncaught Error: Cannot have two HTML5 backends at the same time.
    at HTML5Backend.setup (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:4175), <anonymous>:87:15)
    at DragDropManager.handleRefCountChange (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:3566), <anonymous>:52:22)
    at Object.dispatch (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:4931), <anonymous>:186:19)
    at HandlerRegistry.addSource (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:3594), <anonymous>:104:18)
    at registerSource (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:4294), <anonymous>:9:27)
    at …

我一直在研究react-dnd(拖放组件).因此,基于鼠标指针识别远滴目标,我想知道是否有任何选项可以更改它,根据拖动对象需要识别的放置目标超过掉落目标的50%.

这与jQuery UI拖放功能类似,后者在droppable元素中包含"tolerance:intersect".

我一直在审查文档和github问题,connectDragPreview对我来说仍然是一个谜.我想定义一个自定义预览,以了解项目在拖动时的显示方式.它应该起作用,就像这里的例子适用于拖动时出现的马图像一样.这是我的代码:

export const tokenCollector: DragSourceCollector = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
};

class TokenClass extends React.Component<TokenProps> {
  componentDidMount() {
    const { connectDragPreview } = this.props;
    const img = new Image();
    img.src = '<encoded image>';
    img.onload = () => connectDragPreview(<div>{img}</div>);
  }
  render() {
    const { connectDragSource, isDragging, children } = this.props;
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }}>
        {children}
      </div>
    );
  }
}
const dragSource …