[fix]: Cannot have two HTML5 backends at the same time.

[kn-msz]

react-dnd 解决方案 https://github.com/react-dnd/react-dnd/issues/186

[hcg1023]

没有理解你的问题，能详细说说吗

[kn-msz]

没有理解你的问题，能详细说说吗

react-dnd 是这么解决的 https://github.com/react-dnd/react-dnd/issues/186

[hcg1023]

懂了。在vue3-dnd里，你也可以通过类似的代码解决这个问题，你可以在全局实例化backend，并传递给DndProvider

[hcg1023]

我们的DndProvider也是支持manager参数的

[kn-msz]

useDndContextInjector useDndContextProvider 这个是吗

我们的DndProvider也是支持manager参数的

[hcg1023]

用DndProvider组件也可以，用useDndContextProvider也可以

[kn-msz]

有实例吗

用DndProvider组件也可以，用useDndContextProvider也可以

[hcg1023]

还有一种方法更加简单，你可以传递一个context对象给DndProvider组件

[hcg1023]

或者将你的DndProvider提取到App.vue，均可以解决你的问题

[kn-msz]

context

对象内容是什么

[hcg1023]

任意，空对象也可以，最好是在你的两个页面下，分别唯一，即可

[hcg1023]

https://github.com/react-dnd/react-dnd/issues/186#issuecomment-978206387 也可以参考这条，将context传递为上层element对象

[hcg1023]

确保在你的两个页面下，这两个context不相同就可以了

[kn-msz]

> react-dnd/react-dnd#186 (comment) 也可以参考该链接，将context传递为上层element对象

参考代码

import {  defineComponent, ref, onMounted, watch } from 'vue'
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'vue3-dnd'

const DndWrapper = defineComponent({
    props: {
        id: {
            type: String,
            required: true,
        },
    },
    setup(props, {slots}) {
        const context = ref<HTMLElement | null>(null);

        onMounted(() => {
            context.value = document.getElementById(props.id);
        });

        watch(() => props.id, (newId) => {
            context.value = document.getElementById(newId);
        });

        return () => (
            context.value ? (
                <DndProvider backend={ HTML5Backend } options={ {rootElement: context.value} }>
                    { slots?.default?.() }
                </DndProvider>
            ) : null
        );
    },
})

可以了 多谢老板