如何将ReactDOM.findDOMNode从类组件转换为函数组件

Question

我在互联网上发现了这个代码：

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.

谢谢。

Answer 1

坦率地说？你没有。你引用的内容看起来不太好，至少有几个原因：

• ReactDOM.findDOMNode通常是较差的做法。仅仅使用它来连接事件处理程序是非常糟糕的做法；改为使用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(。