错误“不要使用 findDOMNode”；如何修复代码使其不抱怨？答案

【问题标题】：Error 'Do not use findDOMNode'; how to fix the code so it doesn't complain?错误“不要使用 findDOMNode”；如何修复代码使其不抱怨？
【发布时间】：2022-07-19 22:45:24
【问题描述】：

我的 react 项目中有一个 javascript 类。

基本上，我想在我的 UI 中添加一个旭日形饼图。所以我把它的代码放在我的反应项目中。在编译时（即当我运行 npm start 时）我收到错误

error    Do not use findDOMNode                       react/no-find-dom-node

我在网上阅读，但我仍然不完全理解这个错误（或者 findDOMNode 的作用）。

我只需要将 findDOMNode 的代码修复为所需的任何内容，因为现在我只是禁用该规则。

import React from "react";
import ReactDOM from "react-dom";
import Sunburst from "sunburst-chart";
/* eslint-disable react/no-find-dom-node */
/* eslint-disable no-console */

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();
    this.state = {
      myChart: Sunburst().data(data)
    };
  }

  componentDidMount() {
    // set el height and width etc.
    this.state.myChart(ReactDOM.findDOMNode(this));
  }

  onSelect(event) {
    console.log(event);
  }
  render() {
    return <div id="chart" />;
  }
}
export default SunburstChart;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

Facebook 最终会弃用 findDOMNode，因为它会阻止 React 未来的某些改进。

建议改用回调引用。请参阅此处的 Dan Abramov cmets 和示例： https://github.com/jsx-eslint/eslint-plugin-react/issues/678#issue-165177220

来源：https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md

【讨论】：

请正确引用您的答案。 github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/….