2018-04-21 eslint 提示：Do not use findDOMNode

记录一条 eslint 提示：

[eslint] Do not use findDOMNode (react/no-find-dom-node)

背景

使用react-dnd做拖拽功能时，需要判断真实DOM的大小和位置。

官方示例： https://github.com/react-dnd/react-dnd/blob/164a8048296101e3bcf543df3406ee6dabfdf059/packages/documentation/examples/04%20Sortable/Simple/Card.js#L35

但是我们项目使用 eslint 检查 js 代码品质。所以出现 👆 提示。

解决方法

// Step 1. render()
;<div
  ref={node => {
    this.node = node
  }}
>
  ...
</div>

// Step 2. function
component.decoratedComponentInstance.node.getBoundingClientRect()

参考： https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md