安装“react-dnd”和“react-dnd-html5-backend”无法找到“react/jsx-runtime”

问题: 

This dependency was not found:

* react/jsx-runtime in ./node_modules/react-dnd/dist/core/DndProvider.js

To install it, you can run: npm install --save react/jsx-runtime

过程:

npm install --save react/jsx-runtime 无法执行;

于是查找发现:

React 17编译器从导入一个新的依赖项react/jsx-runtime,该依赖项处理JSX转换。

但是我们项目使用的是react 16,项目升级为17是不太可能了,成本太大。

于是猜测“react-dnd”和“react-dnd-html5-backend”安装的版本太高了,果然他们安装的版本都到了"16.X.X"。

于是降低“react-dnd”和“react-dnd-html5-backend”的版本为:

 解决。 

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react-dnd 是一个用于拖放操作的 React 库。它提供了一些组件和工具,使我们能够轻松地将拖动操作集成到我们的 React 应用中。 要使用 react-dnd,我们需要先安装它。可以使用 npm 命令行工具完成安装: ``` npm install --save react-dnd react-dnd-html5-backend ``` 我们需要安装 react-dndreact-dnd-html5-backend。后者是一个 HTML5 后端,它提供了一些基本的本地浏览器支持。 然后,我们需要在我们的应用程序中导入 react-dnd 的相关组件和工具。通常,我们需要导入 DragSource、DropTarget、DragDropContext 和 HTML5Backend: ``` import { DragSource, DropTarget } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import { DragDropContext } from 'react-dnd'; ``` 接下来,我们需要创建一个 DragSource 和一个 DropTarget 组件。这些组件是我们用来定义拖放操作的核心。 DragSource 定义一个组件可以被拖动的方式,DropTarget 定义一个组件可以接收拖放的元素。 例如,创建一个简单的 DragSource 组件会像这样: ``` import { DragSource } from 'react-dnd'; const ItemTypes = { CARD: 'card' }; const cardSource = { beginDrag(props) { return { id: props.id }; } }; function collect(connect, monitor) { return { connectDragSource: connect.dragSource(), isDragging: monitor.isDragging() }; } const Card = ( <div> Drag Me! </div> ); export default DragSource(ItemTypes.CARD, cardSource, collect)(Card); ``` 这个简单的例子定义了一个拖动的卡片元素,其中 cardSource 是定义拖动行为的 Javascript 对象,beginDrag 方法返回了一个包含 id 属性的拖动项,用于标识当前拖动的卡片。 接下来,我们需要使用 DragDropContext 组件来包裹整个应用程序,并使用 HTML5Backend 作为拖放后端: ``` import { DragDropContext } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; ... export default DragDropContext(HTML5Backend)(App); ``` 这样我们就可以在应用程序中使用 DragSource 和 DropTarget 组件了。 当我们成功地拖动一个拖动源到它的目标时,它会触发 DropTarget 上的 drop 方法,我们可以在这个方法中定义我们想要发生的操作,例如重新排列、合并或删除元素。 以上就是 react-dnd 的简单使用方法。具体的实现还需要根据实际需求进行详细的设计和开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值