本文實(shí)例講述了React中Ref 的使用方法。分享給大家供大家參考，具體如下：

React中Ref 的使用 React v16.6.3

在典型的React數(shù)據(jù)流中，props是父組件與其子組件交互的唯一方式。要修改子項(xiàng)，請(qǐng)使用new props 重新呈現(xiàn)它。但是，在某些情況下，需要在典型數(shù)據(jù)流之外強(qiáng)制修改子項(xiàng)。要修改的子項(xiàng)可以是React組件的實(shí)例，也可以是DOM元素。對(duì)于這兩種情況，React都提供了api。

何時(shí)使用refs

refs有一些很好的用例：

1.文本選擇或媒體播放。

2.觸發(fā)勢(shì)在必行的動(dòng)畫(huà)。

3.與第三方DOM庫(kù)集成。

避免將refs用于可以聲明性地完成的任何操作。

*不要過(guò)度使用Refs

舊版API：字符串引用

如果您之前使用過(guò)React，那么您可能熟悉一個(gè)舊的API，其中ref屬性是一個(gè)字符串"textInput"，并且DOM節(jié)點(diǎn)被訪問(wèn)為this.refs.textInput。建議不要使用它，因?yàn)樽址糜幸恍﹩?wèn)題，被認(rèn)為是遺留問(wèn)題，很可能會(huì)在未來(lái)的某個(gè)版本中刪除。

回調(diào)引用

當(dāng)組件安裝時(shí)，React將使用DOM元素調(diào)用ref回調(diào)，并在卸載時(shí)調(diào)用null。

在componentDidMount或componentDidUpdate觸發(fā)之前，Refs保證是最新的.

class CustomTextInput extends React.Component {

constructor(props) {

super(props);

this.textInput = null;

this.setTextInputRef = element => {

this.textInput = element;

};

this.focusTextInput = () => {

// Focus the text input using the raw DOM API

if (this.textInput) this.textInput.focus();

};

}

componentDidMount() {

// autofocus the input on mount

this.focusTextInput();

}

render() {

// Use the `ref` callback to store a reference to the text input DOM

// element in an instance field (for example, this.textInput).

return (

type="text"

ref={this.setTextInputRef}

/>

type="button"

value="Focus the text input"

onClick={this.focusTextInput}

/>

);

}

}

refs例子--點(diǎn)擊獲取input焦點(diǎn)

class Example extends React.Component {

handleClick() {

// 使用原生的 DOM API 獲取焦點(diǎn)

this.refs.myInput.focus

();

}

render() {

// 當(dāng)組件插入到 DOM 后，ref 屬性添加一個(gè)組件的引用于到 this.refs

return (

type="button"

value="點(diǎn)我輸入框獲取焦點(diǎn)"

onClick={this.handleClick.bind(this)}

/>

);

}

}

使用React.createRef()

React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React，我們建議您使用回調(diào)引用。

創(chuàng)建React.createRef()

Refs是使用屬性創(chuàng)建的，React.createRef()并通過(guò)ref屬性附加到React元素。在構(gòu)造組件時(shí)，通常將Refs分配給實(shí)例屬性，以便可以在整個(gè)組件中引用它們。

class MyComponent extends React.Component {

constructor(props) {

super(props);

this.myRef = React.createRef();

}

render() {

return

}

}

訪問(wèn)ref

當(dāng)ref被傳遞給元素時(shí)render，對(duì)該節(jié)點(diǎn)的引用變得可以在currentref 的屬性處訪問(wèn)

const node = this.myRef.current;

ref的值根據(jù)節(jié)點(diǎn)的類型而有所不同

當(dāng)在refHTML元素上使用該屬性時(shí)，ref在構(gòu)造函數(shù)中創(chuàng)建的屬性將React.createRef()接收底層DOM元素作為其current屬性。

在ref自定義類組件上使用該屬性時(shí)，該ref對(duì)象將接收組件的已安裝實(shí)例作為其current。

您可能無(wú)法ref在函數(shù)組件上使用該屬性，因?yàn)樗鼈儧](méi)有實(shí)例。

class CustomTextInput extends React.Component {

constructor(props) {

super(props);

// create a ref to store the textInput DOM element

this.textInput = React.createRef();

this.focusTextInput = this.focusTextInput.bind(this);

}

focusTextInput() {

// Explicitly focus the text input using the raw DOM API

// Note: we're accessing "current" to get the DOM node

this.textInput.current.focus();

}

render() {

// tell React that we want to associate the ref

// with the `textInput` that we created in the constructor

return (

type="text"

ref={this.textInput} />

type="button"

value="Focus the text input"

onClick={this.focusTextInput}

/>

);

}

}

current當(dāng)組件安裝時(shí)，React將為該屬性分配DOM元素，并null在卸載時(shí)將其分配回。ref更新發(fā)生之前componentDidMount或componentDidUpdate生命周期方法。

無(wú)法在函數(shù)組件上使用ref屬性

function MyFunctionComponent() {

return ;

}

class Parent extends React.Component {

constructor(props) {

super(props);

this.textInput = React.createRef();

}

render() {

// This will *not* work!

return (

);

}

}

**如果需要引用它，則應(yīng)該將組件轉(zhuǎn)換為類，就像您需要生命周期方法或狀態(tài)時(shí)一樣。

但是，只要引用DOM元素或類組件，就可以在函數(shù)組件中使用該ref屬性：**

function CustomTextInput(props) {

// textInput must be declared here so the ref can refer to it

let textInput = React.createRef();

function handleClick() {

textInput.current.focus();

}

return (

type="text"

ref={textInput} />

type="button"

value="Focus the text input"

onClick={handleClick}

/>

);

}

將DOM引用公開(kāi)給父組件

在極少數(shù)情況下，可能希望從父組件訪問(wèn)子節(jié)點(diǎn)的DOM節(jié)點(diǎn)。通常不建議這樣做，因?yàn)樗鼤?huì)破壞組件封裝，但它偶爾可用于觸發(fā)焦點(diǎn)或測(cè)量子DOM節(jié)點(diǎn)的大小或位置。

雖然可以向子組件添加引用，但這不是一個(gè)理想的解決方案，因?yàn)橹荒塬@得組件實(shí)例而不是DOM節(jié)點(diǎn)。此外，這不適用于功能組件。

如果使用React 16.3或更高版本，我們建議在這些情況下使用ref forwarding。引用轉(zhuǎn)發(fā)允許組件選擇將任何子組件的引用公開(kāi)為自己的組件。可以在ref轉(zhuǎn)發(fā)文檔中找到有關(guān)如何將子DOM節(jié)點(diǎn)公開(kāi)給父組件的詳細(xì)示例。

如果您使用React 16.2或更低版本，或者您需要比ref轉(zhuǎn)發(fā)提供的更多靈活性，您可以使用此替代方法并明確地將ref作為不同名稱的prop傳遞。

如果可能，建議不要暴露DOM節(jié)點(diǎn)，但它可以是一個(gè)有用的逃生艙。請(qǐng)注意，此方法要求向子組件添加一些代碼。如果您完全無(wú)法控制子組件實(shí)現(xiàn)，則最后一個(gè)選項(xiàng)是使用findDOMNode()，但不鼓勵(lì)使用它StrictMode。

希望本文所述對(duì)大家react程序設(shè)計(jì)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的react 子组件ref_React中Ref 的使用方法详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。