使用对组件的引用进行 React 拖放

Question

我正在做一个React项目，我希望能够在拖放对某个组件的引用后加载该组件。例如，在屏幕左侧，我有一个组件列表，只是名称，而不是实际组件(条形图、折线图等(，我希望能将名称拖到屏幕的另一个区域，并在那里加载该组件。到目前为止，我已经能够使用e.dataTransfer.setData/getData传输列表项本身，但我不确定如何加载列表项引用的组件。有什么办法吗？

谢谢！

Answer 1

您可以使用组件列表(不是实际的(来存储其标识符(字符串、id(，当您将每个组件放入放置区域时，您可以在该放置区域内编写条件呈现(例如：放置区域有一个来自state的数组，当数组有新元素时，根据其标识符呈现该元素(

Answer 2

您并不是说您是否在转移：

• 对组件类(或函数(的引用
• 对组件实例的引用

如果引用的是组件类：
(请注意，这只是一个近似的伪代码(

const onDropped = () => {
const myDroppedRef = getData();
setAllDroppedItems((current) => ([
...current,
<myDroppedRef ...some props />,
]));
};
const [allDroppedItems, setAllDroppedItems] = useState([]);
return (<div>
{allDroppedItems}
</div>
);

如果引用是组件的实例，
示例是相同的，只是：

// change this:
<myDroppedRef ...some props />,
// to this:
myDroppedRef,