React-DnD-Touch-Backend实例改造求助：DOM渲染改可导出组件

嘿，我懂你作为React-DnD新手的纠结——把示例里那种直接怼DOM的渲染方式改成可导出的组件其实一点都不难，我来给你一步步拆解！

核心思路 #

原示例的代码是把包裹好的组件直接通过ReactDOM.render渲染到页面，我们要做的就是把组件包裹逻辑和渲染逻辑分离：把经过DragDropContext包裹后的组件导出，再在入口文件里完成渲染操作。

具体代码改造 #

第一步：重构组件文件（比如命名为App.js）

把原示例里的App组件定义、Touch Backend包裹逻辑放到这个文件里，然后导出包裹后的组件：

import React from 'react';
import { DragDropContext } from 'react-dnd';
import TouchBackend from 'react-dnd-touch-backend';

// 这里保留原示例里的App组件实现
const App = ({ lists }) => {
  // 原示例中的App组件内部逻辑和JSX都放在这里
  return (
    <div className="drag-drop-app">
      {/* 原示例里的列表、拖拽元素等内容 */}
    </div>
  );
};

// 用Touch Backend包裹App组件，保留原配置
const DragDropApp = DragDropContext(Touch({ enableMouseEvents: true }))(App);

// 导出这个可复用的组件
export default DragDropApp;

第二步：创建入口文件（比如index.js）

把原示例里的渲染逻辑移到这里，导入我们导出的组件并渲染到DOM：

import React from 'react';
import ReactDOM from 'react-dom/client';
import DragDropApp from './App';
// 导入原示例里的数据源，注意替换成你的实际路径
import datasource from './path-to-your-datasource';

// 针对React 18的渲染方式（如果是React 17及以下可以用ReactDOM.render）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DragDropApp lists={datasource} />);

几个关键注意点 #

• 确保你已经安装了必要依赖：执行npm install react-dnd react-dnd-touch-backend（或yarn/pnpm对应命令）
• 如果你的项目用React 17及更低版本，把入口里的createRoot改回旧的ReactDOM.render写法：

  ReactDOM.render(
    <DragDropApp lists={datasource} />,
    document.getElementById('root')
  );
  

• 原示例里的数据源datasource要保证路径正确，别写错导入路径哦！

内容的提问来源于stack exchange，提问作者Nicolas Albarracin