如何修复React项目中‘Do not use findDOMNode’错误？

首先咱们先理清楚核心问题：ESLint报错是因为findDOMNode是React官方标记为过时的API，它会破坏组件封装性，在React Strict Mode下还会触发警告，未来版本甚至可能被移除。它的作用是获取组件挂载后对应的真实DOM节点，但现在有更安全、更清晰的替代方案——React Refs。

接下来直接把你的代码改成合规写法，彻底解决报错：

修改后的完整代码 #

import React from "react";
import Sunburst from "sunburst-chart";

const data = {
  name: "main",
  color: "magenta",
  children: [
    { name: "a", color: "yellow", size: 1 },
    { name: "b", color: "red", children: [
      { name: "ba", color: "orange", size: 1 },
      { name: "bb", color: "blue", children: [
        { name: "bba", color: "green", size: 1 },
        { name: "bbb", color: "pink", size: 1 }
      ] }
    ] }
  ]
};

class SunburstChart extends React.Component {
  constructor() {
    super();
    // 创建一个Ref，专门用来指向要操作的DOM元素
    this.chartRef = React.createRef();
    this.state = { myChart: Sunburst().data(data) };
  }

  componentDidMount() {
    // 通过ref.current获取真实DOM节点，替代findDOMNode
    if (this.chartRef.current) {
      this.state.myChart(this.chartRef.current);
    }
  }

  onSelect(event) {
    console.log(event);
  }

  render() {
    // 将Ref绑定到目标div上
    return <div id="chart" ref={this.chartRef} />;
  }
}

export default SunburstChart;

关键修改点说明 #

1. 创建Ref：在构造函数中用React.createRef()生成一个chartRef，明确用来关联我们要操作的DOM元素。
2. 绑定Ref到DOM：在render的<div>标签上通过ref={this.chartRef}，把Ref和这个DOM节点建立关联。
3. 替换findDOMNode：在componentDidMount里，用this.chartRef.current替代ReactDOM.findDOMNode(this)——ref.current就是我们绑定的目标DOM节点，加个存在性判断能避免组件未挂载时的潜在问题。

为什么这样更优？ #

• 更清晰可控：你能明确知道Ref指向的是哪个DOM元素，不像findDOMNode(this)可能意外指向子组件的DOM，破坏组件封装。
• 符合React设计趋势：Ref是官方推荐的获取DOM节点的标准方式，稳定性更强，不会因为React版本更新出现兼容性问题。
• 彻底解决ESLint问题：现在你可以删掉开头的/* eslint-disable react/no-find-dom-node */规则禁用代码，ESLint不会再抛出报错。

内容的提问来源于stack exchange，提问作者cluis92