Reactjs 要将组件从侧栏拖到仪表板，但不从侧栏删除该项吗 import'/App.css'； 从“react dnd”导入{DndProvider，useDrag，useDrop}； 从“react-dnd-html5-backend”导入{HTML5Backend}； 常量MovableItem=（{setIsFirstColumn}）=>{ 常量[{isDraging}，拖动]=使用拖动({ 项：{name:'Any custom name'，type:'Our first type'}， 结束：（项目，监视器）=>{ const dropResult=monitor.getDropResult（）； if（dropResult&&dropResult.name===“第1列”）{ setIsFirstColumn（真） }否则{ setIsFirstColumn（false）； } }, 收集：（监视器）=>({ IsDraging:monitor.IsDraging（）， }), }); 常数不透明度=IsDraging？0.4:1； 返回( 我们将移动此项目 ) } const Column=（{children，className，title}）=>{ 常量[，drop]=useDrop({ 接受：“我们的第一类”， drop:（）=>（{name:title}）， }); 返回( {title} {儿童} ) } 常量应用=（）=>{ const[isFirstColumn，setIsFirstColumn]=useState（true）； const[isSecondColumn，setIsSecondColumn]=useState（true）； 常数项=； 返回( {/*包装将是“可拖动”和“可拖放”的组件*/} {isFirstColumn&&Item} {isFirstColumn&&Item} ); } 导出默认应用程序

解释 我基本上是想从侧栏拖动项目，然后放到仪表板上查看完整的组件，但是当我必须放到仪表板上时，我不想从侧栏上删除它，我如何使用react dnd实现这一点，或者有其他替代方法吗 多谢各位

import './App.css';
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const MovableItem = ({ setIsFirstColumn }) => {
    const [{ isDragging }, drag] = useDrag({
        item: { name: 'Any custom name', type: 'Our first type' },
        end: (item, monitor) => {
            const dropResult = monitor.getDropResult();
            if (dropResult && dropResult.name === 'Column 1') {
                setIsFirstColumn(true)
            } else {
                setIsFirstColumn(false);
            }
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    });

    const opacity = isDragging ? 0.4 : 1;

    return (
        <div ref={drag} className='movable-item' style={{ opacity }}>
            We will move this item
        </div>
    )
}

const Column = ({ children, className, title }) => {
    const [, drop] = useDrop({
        accept: 'Our first type',
        drop: () => ({ name: title }),
    });

    return (
        <div ref={drop} className={className}>
            {title}
            {children}
        </div>
    ) 
}

const App = () => {
    const [isFirstColumn, setIsFirstColumn] = useState(true);
    const [isSecondColumn, setIsSecondColumn] = useState(true);

    const Item = <MovableItem setIsFirstColumn={setIsFirstColumn} />;

    return (
        <div className="container">
            {/* Wrap components that will be "draggable" and "droppable" */}
            <DndProvider backend={HTML5Backend}>
                <Column title='Column 1' className='column first-column'>
                    {isFirstColumn && Item}
                </Column>
                <Column title='Column 2' className='column second-column'>
                    {isFirstColumn && Item}
                </Column>
            </DndProvider>
        </div>
    );
}
export default App