使用 React-DOM 获取当前组件的 DOM 元素：返回 NULL

Question

我在关注 this article，它说您可以将当前组件的 DOM 元素作为 ReactDOM.findDOMNode(this)。

但是当我尝试这个时，我在 node var:

中得到了 NULL 结果

export default function Component(props) {

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

}

Answer 1

findDOMNode 在函数组件中不起作用，除了 docs ("findDOMNode cannot be used on function components."), it has to do with the fact that function components don't have instances like classes, read carefully .

中写的内容

在函数组件中，通过将 ref 附加到根节点来获取当前 DOM 元素：

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

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

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

使用 React-DOM 获取当前组件的 DOM 元素：返回 NULL

Get DOM Element of Current Component with React-DOM: NULL returned

reactjs

react-dom