通常,在创建可移动React组件时,需要重新创建一个“remove”函数。但是,可以使用“React.cloneElement”函数来创建可移动的React组件,而无需重新创建“remove”函数。
下面是一个简单的示例代码,演示如何使用“React.cloneElement”函数来创建可移动的React组件:
import React, { useState } from 'react';
function App() {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
function handleRemove(index) {
const newItems = [...items];
newItems.splice(index, 1);
setItems(newItems);
}
return (
{items.map((item, index) => (
handleRemove(index)} />
))}
);
}
function RemovableItem({ item, onRemove }) {
return (
{item}
);
}
export default App;
在这个例子中,“RemovableItem”组件是一个可移动的React组件,它通过使用“React.cloneElement”函数传递“onRemove”函数来接收“App”组件中的“handleRemove”函数。因此,当用户点击“X”按钮时,“onRemove”函数将调用“handleRemove”函数,将与该项目相关的项目从项目列表中删除。