如何将 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()

  ，而

  Component

  子类则需要这样做。

相反，使用 React 的事件：

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

作为顶级元素，但这只是一个示例，它可以是您需要的任何内容。