什么是 react-event-data？
react-event-data 是一个 React 组件库，它主要解决在 React 事件处理中，传递自定义数据的问题。
React 事件处理函数的参数包括 event 对象和触发事件的元素，它们对于维护组件的状态和更新视图非常重要。但有时候我们需要传递一些其他的数据，例如在一个列表中点击某个项目，希望知道该项目的 id 或者其他信息。这时候我们可以通过一些手段来传递数据，例如在组件中定义变量或者使用闭包等方式。但这些方法有时候会带来一些不便或者难以维护的问题。
react-event-data 就是为了解决这个问题而开发的一个组件库，它提供了一种简单而优雅的方式，在 React 事件处理函数中传递自定义的数据，让代码更加清晰和易于维护。
如何使用 react-event-data？
安装
在使用 react-event-data 之前，我们需要先安装它。可以使用 npm 或者 yarn 安装。在命令行中输入以下命令：
npm install react-event-data
或者
yarn add react-event-data
引入
安装完成之后，我们需要在代码中引入 react-event-data。可以使用 ES6 的 import 语法：
import EventData from 'react-event-data';
使用
react-event-data 提供了一个高阶组件 EventData，来增强组件的事件处理函数，并传递自定义数据。使用 EventData 包装组件后，我们就可以通过 props 获取事件处理函数传递的数据了。
下面是一个简单的例子，演示如何在点击按钮时，传递自定义数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
----- ----------- ------- --------------- -
----------- - ------- ---------- -- -
-------------------- ------ ---- ----- ---------------
-
-------- -
------ -
------- --------------------------------------- --------
----- --
---------
--
-
-
------ ------- -----------------------在这个例子中，我们定义了一个 MyComponent 组件，并使用 EventData 包装它。在组件中定义了一个 handleClick 函数，它接受两个参数，第一个是 event 对象，第二个是自定义的 eventData 数据。在组件的 render 函数中，我们通过 props 获取了一个 onClickWithData 函数，它是在 EventData 包装后自动生成的。这个函数接受一个参数，就是我们要传递的自定义数据。当按钮被点击时，这个函数会被调用，并把传递的数据作为第二个参数传给 handleClick 函数。这样我们就可以在 handleClick 函数中，通过 eventData 参数获取到我们传递的数据了。
总结
react-event-data 是一个非常实用的工具，能够帮助我们更加优雅地处理 React 事件中的自定义数据传递问题。在使用时，我们只需要使用 EventData 包装组件，并在事件处理函数中按照约定传递数据，这样就能够把自定义数据和事件处理的代码，统一起来，让代码更加简洁、清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe381e8991b448dd82c