React ref使用分析

為什麼有ref,雖然官方總是不推薦使用這種破壞整體框架的api,但是實際開發,總有一些場景需要直接操作dom元素,所以有了這個api.但是如果能不使用盡量不使用.

雖然,有種種不利,但是在一些場景確實有效並且真香~}}

class cart extends react.component

del = (value, index) =>

state =

ballid = 0

add = (ball) =>

this.setstate()

settimeout(() => , 0)

}del = (index) => )

}componentdidmount () )

}target =

animated = () => , , )

});this.setstate()

console.log(this.state)}}

render () src="./imgs/cart.png" //>

}}reactdom.render(, document.queryselector('#root-cart'))

越級繫結ref

react.forwardref:首先為什麼要使用這個方法，因為react中不支援想傳遞普通屬性props一樣傳遞ref這個命名的屬性。

如上，在test元件中testname可以通過this.props.testname獲取到父元件傳遞的值（傳入子元件的引數）。但是ref不同，因為ref的作用是繫結元件或者dom，可以通過繫結值操作元件或者dom，所以ref的值是它繫結的元件或者dom，並不是傳入到元件內，所以並不能使用props屬性獲取。那麼如果我們要傳遞乙個ref進入子元件怎麼做呢？那麼就不能使用ref，可以換個名字：

sonref = react.createref()

grandsonref = react.createref()

onclickhandle=()=>

render ()

}class son extends react.component = this.props;

return son

}}class grandson extends react.component }

如上，我們通過diyref傳遞乙個父元件定義的ref到子元件中，然後通過子元件繫結到孫元件上。同理，我們也可以採用傳遞函式的方式傳遞乙個函式子元件，然後子元件把這個函式傳遞到孫元件，在孫元件中呼叫這個函式返回自己，最終繫結到父元件的屬性上。

那麼除了換名稱，還有其他什麼方式傳遞ref嗎，事實上有的，官方還提供了乙個react.forwardref來做這件事。

sonref = react.createref()

grandsonref = react.createref()

onclickhandle=()=>

render () }

正常情況下，上面的ref直接繫結了son，所以在son中我們獲取不到ref，但是如果我希望在son中能獲取ref傳遞的引數，而不是把當做繫結操作，我們可以是用react.forwardref來定義son:

const son = react.forwardref((props,ref)=>)

這種情況下，ref當做第二引數直接傳入了，而不是繫結在元件上了。

看到這裡，官網上的例子就不難理解了，結合上面，我們有更好的實踐：

function logprops (component) 
render ()  = this.props;
// 將自定義的 prop 屬性 「forwardedref」 定義為 ref
return ;}}
return react.forwardref((props, ref) => );
}

上面呼叫logprops時候加得ref被掛載到被 logprops 包裹的子元件上，同時利用常規 prop 屬性傳遞ref和react.forwardref，而我們只需要正常的編寫實際的logprops元件即可。

React ref使用分析

React原始碼解析四 react ref

使用分析單

操作使用分析

React ref使用分析

React原始碼解析 四 react ref

使用分析單

操作使用分析

相關推薦

React原始碼解析四 react ref