javascript - React - 数组中每个组件的相同回调

Question

假设我的 React 应用程序中有一个组件数组：

const deleteProject = useCallback(project => {
    // something
}, []);

return (
    projects.map(p => (
        <button onClick={() => deleteProject(p)}>Delete</button>
    );
);

有什么方法可以只使用deleteProject函数而不将其包装到单独的回调中，即{} => {}每个组件？这是出于性能目的。我的意思是：

 <button onClick={deleteProject}>Delete</button>

然后以deleteProject某种方式我需要确定要删除哪个项目，但是如何？它只需要点击事件作为参数

标签： javascriptreactjsperformancecallback

Answer 1

您可以通过将项目标识符分配给按钮来实现，如下所示

const deleteProject = event => {
    projectId = event.target.id;
    // Delete project here using id
}

return (
    projects.map(p => (
        <button id={p.id} onClick={deleteProject}>Delete</button>
    );