如何将ReactDOM.findDOMNode从类组件转换为功能组件

问题描述

我在互联网上找到此代码：

  class ResizablePanels extends React.Component {
  constructor() {
    super();

    this.state = {
      isDragging: false,panels: [300,300]
    };
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener("mousemove",this.resizePanel);
    ReactDOM.findDOMNode(this).addEventListener("mouseup",this.stopResize);
    ReactDOM.findDOMNode(this).addEventListener("mouseleave",this.stopResize);
  } ....

完整代码：https://codesandbox.io/s/elated-ritchie-83rsy?file=/src/index.js

我想知道，上面的代码片段如何转换为功能组件，尤其是如何使用componentDidMount（）转换节。我知道，我需要使用钩子“ useEffect”，但是可以将addEventListener与“ useRef”一起使用吗？我不想使用ReactDOM.findDOMNode。

谢谢。

解决方法

坦率地说？你不知道至少由于以下两个原因，您所引用的内容看起来不太好：

• ReactDOM.findDOMNode通常是poor practice。仅使用它来挂接事件处理程序是非常差的做法。在顶层元素上使用React的事件代替，或更糟糕的是使用ref。

• 它不会将props传递给super()。

相反：

function ResizablePanels() {
    const [isDragging,setIsDragging = useState(false);
    const [panels,setPanels] = useState([300,300]); // *** Only if they change during component lifecycle

    const resizePanel = (evt) => {
        // ...
    };
    const stopPanel = (evt) => {
        // ...
    };

    return (
        <div onMouseMove={resizePanel} onMouseUp={stopResize} onMouseLeave={stopResize}>
        ...
        </div>
    );
}

...或任何存在的顶级元素（不必使用div）。