获取当前组件的DOM元素，返回React-DOM: NULL

Question

我关注的是this article，它说您可以以ReactDOM.findDOMNode(this)的形式获取当前组件的DOM元素。

但是当我尝试这样做时，我在node变量中得到了一个空的结果：

export default function Component(props) {

    // Initialization
   useEffect(() => {
    const node = ReactDOM.findDOMNode(this);
    console.log(node); // NULL 
   }, []); 

}

Answer 1

findDOMNode不能在函数组件中工作，除了在docs中写的("findDOMNode不能用于函数组件。“)，它与函数组件没有像类一样的实例的事实有关，请仔细阅读related question。

在function component中，通过将ref附加到根节点来获取当前的DOM元素：

export default function Component(props) {
  const nodeRef = useRef();

  useEffect(() => {
    console.log(nodeRef.current);
  }, []);

  // Root Node
  return <input ref={nodeRef} />;
}