資訊專欄INFORMATION COLUMN
摘要：屬性其實(shí)就是為了獲取節(jié)點(diǎn)，例如屬性利用屬性返回的回調(diào)函數(shù)獲取節(jié)點(diǎn)，從而讓頁(yè)面渲染完成之后，聚焦，除了可以綁定回調(diào)函數(shù)之外還能綁定字符串，但是在后期對(duì)字符串形式不再維護(hù)，這里就不具體說(shuō)明了，就用回調(diào)函數(shù)獲取。
ref屬性其實(shí)就是為了獲取DOM節(jié)點(diǎn)，例如：
import React from "react"
class RefComponent extends React.Component {
componentDidMount(){
this.inputNode.focus();
}
render() {
return (
ref屬性
this.inputNode = node}/>
)
}
}
export default RefComponent;
利用ref屬性返回的回調(diào)函數(shù)獲取DOM節(jié)點(diǎn)，從而讓頁(yè)面渲染完成之后，input聚焦，ref除了可以綁定回調(diào)函數(shù)之外還能綁定字符串，但是在后期react對(duì)字符串形式不再維護(hù)，這里就不具體說(shuō)明了，就用回調(diào)函數(shù)獲取DOM。
除了給input聚焦之外，還可以獲取當(dāng)前DOM節(jié)點(diǎn)的內(nèi)容，如下：
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;
輸出結(jié)果為：
你好你好
在這里，我們也發(fā)現(xiàn)一個(gè)問題，ref雖然獲取DOM節(jié)點(diǎn)很方便，但是如果ref用的多了，后期就不好維護(hù)了，所以，盡量能少用即少用。
ref除了可以給HTML標(biāo)簽添加，也可以給組件添加，例如：
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;
但是此時(shí)，this.buttonNode得到的是一個(gè)Button這個(gè)組件實(shí)例DOM
這里要注意一個(gè)問題，ref只能用在類定義的組件，不能用在函數(shù)組件，因?yàn)楹瘮?shù)組件沒有實(shí)例，比如以下寫法就是錯(cuò)誤的：
import React from "react"
function TestComponent() {
return (
函數(shù)組件
);
}
class RefComponent extends React.Component {
componentDidMount(){
console.log(this.testCom);
}
render() {
return (
函數(shù)組件
this.testCom = node}/>
)
}
}
export default RefComponent;
如果這樣寫，則會(huì)報(bào)錯(cuò)，并且this.testCom為undefined，因?yàn)榇藭r(shí)是獲取不到函數(shù)組件的實(shí)例的，所以以上寫法要注意
總結(jié)： ref可以給HTML標(biāo)簽，類組件添加，但是不能給函數(shù)組件添加
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97014.html
摘要：給賦值也是構(gòu)造函數(shù)的工作之一。在的構(gòu)造函數(shù)中，還給兩個(gè)成員函數(shù)綁定了當(dāng)前的執(zhí)行環(huán)境，因?yàn)榉绞絼?chuàng)建的組件并不自動(dòng)給我們綁定到當(dāng)前實(shí)例對(duì)象。我們可以利用的功能，避免判斷邏輯這種充斥在構(gòu)造函數(shù)之中，讓代碼更優(yōu)。 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 組件是React...
摘要：看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動(dòng)加載要注意的東西。通過(guò)判斷不為的情況，確保滾動(dòng)組件正常顯示和在無(wú)滾動(dòng)的情況下，和相等，都為在有滾動(dòng)的情況下，表示實(shí)際內(nèi)容高度，表示視口高度。 react-infinite-scroller就是一個(gè)組件，主要邏輯就是addEventListener綁定scroll事件。 看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動(dòng)加...
摘要：定義一個(gè)組件可以在其他組件中調(diào)用這個(gè)組件調(diào)用組件劉宇組件插入內(nèi)容在上面的案例中可以看到吧寫到當(dāng)中，這種寫法稱為。 React初識(shí) React是Facebook推出的一個(gè)javascript庫(kù)(用來(lái)創(chuàng)建用戶界面的Javascript庫(kù))，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。 組件 React的一切都是基于組件的。web世界的構(gòu)成是基于各種HTML標(biāo)簽的...
摘要：主要用于構(gòu)建，很多人認(rèn)為是中的視圖。函數(shù)接受另一個(gè)函數(shù)作為參數(shù)，返回新生成的對(duì)象的變化，會(huì)導(dǎo)致的變化。用戶無(wú)法直接改變只能觸發(fā)上綁定的事件。表示應(yīng)該要發(fā)生變化了。允許使用方法設(shè)置監(jiān)聽函數(shù)，一旦發(fā)生變化，就自動(dòng)執(zhí)行這個(gè)函數(shù)。 什么是react React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。...
閱讀 3025·2021-11-22 15:25
閱讀 2345·2021-11-18 10:07
閱讀 1115·2019-08-29 15:29
閱讀 551·2019-08-29 13:25
閱讀 1602·2019-08-29 12:58
閱讀 3280·2019-08-29 12:55
閱讀 2979·2019-08-29 12:28
閱讀 586·2019-08-29 12:16
