Javascript 如何将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);
  } ....

完整代码：

我想知道，上面的代码片段如何转换为函数组件，特别是如何使用componentDidMount（）转换节。我知道，我需要使用hook“useffect”，但是否可以将addEventListener例如与“useRef”一起使用？我不想使用ReactDOM.findDOMNode

---

谢谢。

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

• 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>
    );
}

函数大小调整面板（）{
常量[IsDraging，SetIsDraging=useState（false）；
const[panels，setPanels]=useState（[300300]）；//***仅当它们在组件生命周期中更改时
const resizePanel=（evt）=>{
// ...
};
常数stopPanel=（evt）=>{
// ...
};
返回(
...
);
}

---

…或任何顶级元素（不必ba

div

）。

坦率地说，你不必。你所引用的看起来像（从几个方面看，它无法将道具传递给

超级

）.使用React的事件处理，或者在组件的顶级元素上使用

ref

。除此之外，它只是一个。是的，可以将其转移到功能组件，您尝试过什么？我尝试过使用useRef，但它不起作用，值得一提的是，useRef不是我认为的最佳解决方案。是的，我尝试过同样的解决方案，但是在完整的代码前面，有一个问题，它使用event.clientX。所以需要使用effect hook才能使用startResize函数。或者我错了吗？@MichaelRýdl-人们只能帮助你解决问题。（其他网站的链接可能会消失，等等；如果你想获得代码方面的帮助，那代码一定是有问题的）.我不知道您是否需要

useffect

某个地方，但我不希望您仅用于调整事件大小。