公司产品有埋点需求。当用户点击日志记录时，会上报日志列表中的最新记录和当前记录信息。由于组件之间距离较远，无法直接获取到多层外组件中的数据，所以采用hack的方式解决，记录于此，以供读者参考。背景介绍笔者参与的项目有一个日志中心功能，类似于上图的通知中心。产品给出的要求如下：当用户点击一条记录时，点击-->需要发送当前记录类型和创建时间，以及日志列表中最新一条记录的创建时间，以及最新记录与当前记录之间的间隔。在React中，数据主要通过单向数据流传递给子组件。仔细分析后发现，通过传统方法获取并不容易。首先，用户点击的记录没有最新的记录信息，所以不会有最新记录的创建时间。第二，记录是懒加载的，所以不能直接获取最新记录和当前记录的间隔。通过重构将这些数据传递到组件中肯定是可以的，但是代价会很大，更何况是多层业务组件的嵌套，即使数据存储在Redux中也需要大量的计算资源，而且稍有不慎，也会导致不必要的组件渲染。这次使用的hack方法的技术原理并不复杂。核心思想是获取页面中的DOM，通过DOM节点的native方法进行计算，得到想要的数据。最新记录的日志类型和时间戳与标准html一致。React支持使用data-*属性嵌入自定义数据：一个DIV节点例如，在上面的div标签，通过data-time属性将当前记录的时间字段绑定到标签上。绑定后如何获取，也可以使用浏览器的native方法，如：document.getElementById()document.querySelectorAll()，这里以第二种方式进行演示：//获取日志记录DOM列表（每个一个是DOM节点)constitemList=document.querySelectorAll('.item')//获取用户点击的DOM节点在列表中的位置constclickedRecord=[].indexOf.call(itemList,e.currentTarget)//获取第一条DOM节点上绑定的时间数据constfirstItemTime=itemList[0].getAttribute('data-time')简述过程：通过日志唯一的className标签获取日志记录的DOM列表item，然后用鼠标点击对象currentTarget属性获取当前点击的日志DOM对象，然后计算当前日志在列表中的位置。最新记录的创建时间通过DOM节点的getAttribute方法获取绑定数据。综上所述，React官方不推荐直接操作DOM，但是直接操作DOM确实可以解决很多特殊的业务需求（sweet），所以开发者朋友们闲着没事还是要捡起DOM的方法，也许什么？是时候使用它了。另外需要说明的是，这只是暂时的埋点要求。如果是项目中的核心功能点，这个方法需要慎重评估。
