这是将数据传递给事件处理程序的更好方法：通过函数闭包或自定义数据属性

Question

我有一个有关将数据传递给事件处理程序的问题。将自定义数据属性附加到组件并从处理程序中接收到的事件对象获取它不是更好，而不是在每个渲染器上创建新函数以关闭数据。这种方法的缺点是什么？因为我在官方文档中找不到任何信息。

const Ids = [0, 1];

const Comp = (props) => {
    const onClick = useCallback((e) => {
        console.log(e.target.dataset.index);
    }, []);

    return (
        Ids.map(id => (
            <div data-id={id} onClick={onClick} />
        ))
    );
};

Answer 1

虽然在原始JavaScript / HTML开发中通常使用data-属性，但是React的处理方式是将所需的数据作为事件处理程序方法的参数的一部分传递。

这实际上是在documentation反应本身上指出的：

没有我们不鼓励您将数据保留在DOM属性中。即使你必须，数据属性可能是一种更好的方法，但是在大多数情况下案例数据应该保存在React组件状态或外部存储中。

因此，尽管react并未明确限制您这样做，但建议的做法是避免使用data-属性，除非必要。

以您的示例为基础，这是应该这样做的方式：

return (
    Ids.map(id => (
        <div data-id={id} onClick={() => onClick(id)} />
    ))
);