初识React(4)：ref属性

curried 发布于2019-08-23 11:28 / 879人阅读

摘要：属性其实就是为了获取节点，例如属性利用属性返回的回调函数获取节点，从而让页面渲染完成之后，聚焦，除了可以绑定回调函数之外还能绑定字符串，但是在后期对字符串形式不再维护，这里就不具体说明了，就用回调函数获取。

ref属性其实就是为了获取DOM节点，例如：

import React from "react"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
  }
   render() {
     return (
       
          ref属性
           this.inputNode = node}/>
       
     )
   }
}

export default RefComponent;

利用ref属性返回的回调函数获取DOM节点，从而让页面渲染完成之后，input聚焦，ref除了可以绑定回调函数之外还能绑定字符串，但是在后期react对字符串形式不再维护，这里就不具体说明了，就用回调函数获取DOM。

除了给input聚焦之外，还可以获取当前DOM节点的内容，如下：

import React from "react"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
  }
   render() {
     return (
       
          ref属性
           this.inputNode = node}/>
           this.texthtml = node}>你好
       
     )
   }
}

export default RefComponent;

输出结果为：

你好
你好

在这里，我们也发现一个问题，ref虽然获取DOM节点很方便，但是如果ref用的多了，后期就不好维护了，所以，尽量能少用即少用。

ref除了可以给HTML标签添加，也可以给组件添加，例如：

import React from "react"
import Button from "./button.js"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
     console.log(this.buttonNode);
  }
   render() {
     return (
       
          ref属性
           this.inputNode = node}/>
           this.texthtml = node}>你好
          
     )
   }
}

export default RefComponent;

但是此时，this.buttonNode得到的是一个Button这个组件实例DOM

这里要注意一个问题，ref只能用在类定义的组件，不能用在函数组件，因为函数组件没有实例，比如以下写法就是错误的：

import React from "react"

function TestComponent() {
   return (
    函数组件
   );
}

class RefComponent extends React.Component {
  componentDidMount(){
     console.log(this.testCom);
  }
   render() {
     return (
       
          函数组件
           this.testCom = node}/>
       
     )
   }
}

export default RefComponent;

如果这样写，则会报错，并且this.testCom为undefined，因为此时是获取不到函数组件的实例的，所以以上写法要注意

总结： ref可以给HTML标签，类组件添加，但是不能给函数组件添加

云服务器 GPU云服务器 react-router4 docker初识 ref Refs

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

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

React系列---React（二）组件的prop和state

摘要：给赋值也是构造函数的工作之一。在的构造函数中，还给两个成员函数绑定了当前的执行环境，因为方式创建的组件并不自动给我们绑定到当前实例对象。我们可以利用的功能，避免判断逻辑这种充斥在构造函数之中，让代码更优。 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期组件是React...

Labradors 2019-08-20 17:33 评论0 收藏0
[源码阅读]通过react-infinite-scroller理解滚动加载要点

摘要：看它的源码主要意义不在知道如何使用它，而是知道以后处理滚动加载要注意的东西。通过判断不为的情况，确保滚动组件正常显示和在无滚动的情况下，和相等，都为在有滚动的情况下，表示实际内容高度，表示视口高度。 react-infinite-scroller就是一个组件，主要逻辑就是addEventListener绑定scroll事件。看它的源码主要意义不在知道如何使用它，而是知道以后处理滚动加...

cikenerd 2019-08-23 13:41 评论0 收藏0
react开发教程（－）初识

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...

Allen 2019-08-21 15:36 评论0 收藏0
初识redux

摘要：主要用于构建，很多人认为是中的视图。函数接受另一个函数作为参数，返回新生成的对象的变化，会导致的变化。用户无法直接改变只能触发上绑定的事件。表示应该要发生变化了。允许使用方法设置监听函数，一旦发生变化，就自动执行这个函数。什么是react React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。...

xumenger 2019-08-22 16:13 评论0 收藏0