[react] react怎么拿到组件对应的DOM元素?

Posted 前端小歌谣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[react] react怎么拿到组件对应的DOM元素?相关的知识,希望对你有一定的参考价值。

[react] react怎么拿到组件对应的DOM元素?

  • 在Class组件中
import React from 'react';
class CComponent extends React.Component 
  refDiv = React.createRef();
  componentDidMount () 
    console.log(this.refDiv.current)
  
  render () 
    return <div>
      <div className="test" ref=this.refDiv>demo</div>
    </div>
  


export default CComponent;

// 老旧语法
import React from 'react';
class CComponent extends React.Component 
  // refDiv = React.createRef();
  componentDidMount () 
    console.log(this.refDiv)
  
  render () 
    return <div>
      <div className="test" ref=ref => this.refDiv>demo</div>
    </div>
  


export default CComponent;
  • 在函数式组件中
import React,  useRef, useEffect  from 'react';

const FComponent = () => 
  const refDiv = useRef();
  useEffect(() => 
    console.log(refDiv.current);
  , []);
  return <div>
    <div className="demo" ref=refDiv>test</div>
  </div>

export default FComponent;

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论











主目录

与歌谣一起通关前端面试题

以上是关于[react] react怎么拿到组件对应的DOM元素?的主要内容,如果未能解决你的问题,请参考以下文章

React:Refs and DOM

react的DOM怎么组合成一个html

React-路由 react-router-dom

react项目可以引入jstree插件吗

React方向:react中5种Dom的操作方式

Chrome 扩展(内容脚本)+ React:从 DOM 获取 React 组件?