React入门0x016: 访问Dom

followWinter

0x000 概述

不到必要不要在React中访问Dom,尝试使用React的思想去解决问题。当然,必要的时候还是可以的,比如某些依赖Dom的组件

0x001 时机

React中,并不是任何时候都可以访问Dom的,需要讲究时机。因为React中的组件存在生命周期,必须要在Dom 挂载之后的生命周期才能访问到Dom,也就是componetnDidMount之后

  • 栗子:

    class App extends React.Component {
        constructor() {
            super()
            console.log('constructor', document.getElementById('cool'))
        }
    
        componentDidMount() {
            console.log('componentDidMount', document.getElementById('cool'))
        }
    
        render() {
            return <div id='cool'>
                Dom
            </div>
        }
    }
  • 输出:

    clipboard.png

0x002 访问方式

  • 传统方式
    传统方式就是上面栗子中那般,直接在componentDidMount之后使用传统方式访问
  • refs
    ref有两种方式

    • ref属性绑定变量,这种方式需要先调用React.createRef创建一个ref,然后在componentDidMount之后的生命周期中使用this.myRef.current来访问。

      class App extends React.Component {
          constructor() {
              super()
              this.myRef = React.createRef();
          }
      
          componentDidMount() {
              const node = this.myRef.current;
              console.log('componentDidMount',node)
          }
      
          render() {
              return <div ref= {this.myRef}>
                  Dom
              </div>
          }
      }

      效果

      clipboard.png

    • 绑定函数,更简约一点,可以直接使用myRef访问

      class App extends React.Component {
          constructor() {
              super()
          }
      
          componentDidMount() {
              console.log('componentDidMount',this.myRef)
          }
      
          render() {
              return <div ref= {(e)=>this.myRef=e}>
                  Dom
              </div>
          }
      }

      效果

      clipboard.png

0x003 总结

不到必要不要在React中访问Dom,尝试使用React的思想去解决问题。

阅读 398

漫漫填坑路,十里长安响码声。
哎,好像不能申请多个专栏呢,原本这个专栏只放前端文章,现在看来不行了!就都放吧!

暂时没有

1.5k 声望
55 粉丝
0 条评论
你知道吗?

暂时没有

1.5k 声望
55 粉丝
宣传栏