React入门0x016: 访问Dom

NeverSayNever 发布于2019-08-23 13:50 / 1885人阅读

摘要：概述不到必要不要在中访问，尝试使用的思想去解决问题。当然，必要的时候还是可以的，比如某些依赖的组件时机在中，并不是任何时候都可以访问的，需要讲究时机。

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 
            Dom
        
    }
}

输出：

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 
            Dom
        
    }
}

效果

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

class App extends React.Component {
    constructor() {
        super()
    }

    componentDidMount() {
        console.log("componentDidMount",this.myRef)
    }

    render() {
        return this.myRef=e}>
            Dom
        
    }
}

效果

0x003 总结

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99645.html

es6基础0x016：生成器函数

摘要：概述其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象生成器迭代器之类的东西，等写完这个系列，再好好整理一下这些东西可能会好一点，现在整理到哪儿就写到哪儿吧语法使用作为声明标识符，表示这是一个生成器函数是函数名是 0x000 概述其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象、生成器、迭代器之类的东西，等写完这个系列，再好好...

ghnor 2019-08-23 13:11 评论0 收藏0
React要点入门学习总结

摘要：上面代码中，通过为组件指定事件的回调函数，确保了只有等到真实发生事件之后，才会读取属性。七表单代码九要点文本输入框的值，不能用读取，而要定义一个事件的回调函数，通过读取用户输入的值。一.JSX简介 JSX即JavaScript XML,一种在React组件内部构建标签的类XML语法。在不使用JSX的情况下，React程序中创建DOM是这样的： //v0.11 React.DOM.h1...

Towers 2019-08-22 12:46 评论0 收藏0
Router入门0x204: react-route简单栗子

摘要：概述这一章仔细讲一讲的使用栗子简单使用源码简单使用首页文章我的首页文章我的效果带导航激活效果源码带导航效果首页文章我的首页文章我的效果说明增强版，如果当前路由命中，将会启用或者。 0x000 概述这一章仔细讲一讲 react-route 的使用栗子 0x001 简单使用源码 import React from react import ReactDom from react-d...

番茄西红柿 2019-08-23 12:16 评论0 收藏0
Router入门0x201: 从 URL 到 SPA

摘要：的全称是统一资源定位符英文，可以这么说，是一种标准，而网址则是符合标准的一种实现而已。渲染器，将组件渲染到页面上。 0x000 概述从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 评论0 收藏0
React入门0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相关的简单用法，这一章需要讲一下组件的生命周期。生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从...

Blackjun 2019-08-23 11:30 评论0 收藏0