2 回答

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊
對于如何ref分配,您必須記住 JSX 編譯為普通的舊 JavaScript。幕后發(fā)生的事情的一個(gè)非常簡單的例子如下:
function createRef(initialValue) {
return {
current: initialValue
}
}
const root = document.getElementById('root');
function render(elementType, innerText, ref) {
const el = document.createElement(elementType);
if (ref) {
ref.current = el;
}
el.innerText = innerText;
root.replaceChildren(el);
}
const ref = createRef(null);
console.log(ref);
render('div', 'Hello World', ref);
console.log(ref);
<div id="root"></div>
所以基本上 - 當(dāng)您使用 時(shí)<img ref={this.imageRef} src={urls.regular} alt={description} />
, 會(huì)ref
作為屬性傳遞,并且在呈現(xiàn)它的函數(shù)中,它將實(shí)際的 DOM 節(jié)點(diǎn)分配給ref.current
。

TA貢獻(xiàn)2012條經(jīng)驗(yàn) 獲得超12個(gè)贊
因此,為了回答你的第一個(gè)問題,React 會(huì)將 DOM 元素分配給currentref 的屬性。在您的情況下,這意味著this.imageRef.current組件渲染后它將成為對圖像元素的引用。
控制臺(tái)輸出部分讓它有點(diǎn)令人困惑,但這并不是由于 React 所做的一些魔法,而是由于瀏覽器控制臺(tái)如何處理在記錄對象后屬性發(fā)生變化的對象。例如,如果您在控制臺(tái)中運(yùn)行以下代碼,然后展開輸出,您將看到與 ref 中看到的相同行為。
const obj = { current: null }
console.log(obj)
obj.current = 'something'
這是它的樣子的屏幕截圖。
添加回答
舉報(bào)