摘要:属性其实就是为了获取节点,例如属性利用属性返回的回调函数获取节点,从而让页面渲染完成之后,聚焦,除了可以绑定回调函数之外还能绑定字符串,但是在后期对字符串形式不再维护,这里就不具体说明了,就用回调函数获取。
ref属性其实就是为了获取DOM节点,例如:
import React from "react" class RefComponent extends React.Component { componentDidMount(){ this.inputNode.focus(); } render() { return () } } export default RefComponent;ref属性
this.inputNode = node}/>
利用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 () } } export default RefComponent;ref属性
this.inputNode = node}/>this.texthtml = node}>你好
输出结果为:
你好你好
在这里,我们也发现一个问题,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 () } } export default RefComponent;ref属性
this.inputNode = node}/>this.texthtml = node}>你好
但是此时,this.buttonNode得到的是一个Button这个组件实例DOM
这里要注意一个问题,ref只能用在类定义的组件,不能用在函数组件,因为函数组件没有实例,比如以下写法就是错误的:
import React from "react" function TestComponent() { return (函数组件); } class RefComponent extends React.Component { componentDidMount(){ console.log(this.testCom); } render() { return () } } export default RefComponent;函数组件
this.testCom = node}/>
如果这样写,则会报错,并且this.testCom为undefined,因为此时是获取不到函数组件的实例的,所以以上写法要注意
总结: ref可以给HTML标签,类组件添加,但是不能给函数组件添加
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97014.html
摘要:给赋值也是构造函数的工作之一。在的构造函数中,还给两个成员函数绑定了当前的执行环境,因为方式创建的组件并不自动给我们绑定到当前实例对象。我们可以利用的功能,避免判断逻辑这种充斥在构造函数之中,让代码更优。 React系列---React(一)初识ReactReact系列---React(二)组件的prop和stateReact系列---React(三)组件的生命周期 组件是React...
摘要:看它的源码主要意义不在知道如何使用它,而是知道以后处理滚动加载要注意的东西。通过判断不为的情况,确保滚动组件正常显示和在无滚动的情况下,和相等,都为在有滚动的情况下,表示实际内容高度,表示视口高度。 react-infinite-scroller就是一个组件,主要逻辑就是addEventListener绑定scroll事件。 看它的源码主要意义不在知道如何使用它,而是知道以后处理滚动加...
摘要:定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中,这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库),所以他只是和用户的界面打交道,你可以把它看成MVC中的V(视图)这一层。 组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...
阅读 2910·2021-11-22 15:25
阅读 2218·2021-11-18 10:07
阅读 991·2019-08-29 15:29
阅读 448·2019-08-29 13:25
阅读 1477·2019-08-29 12:58
阅读 3141·2019-08-29 12:55
阅读 2877·2019-08-29 12:28
阅读 462·2019-08-29 12:16