2 回答

TA貢獻1859條經驗 獲得超6個贊
對于如何ref分配,您必須記住 JSX 編譯為普通的舊 JavaScript。幕后發生的事情的一個非常簡單的例子如下:
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>
所以基本上 - 當您使用 時<img ref={this.imageRef} src={urls.regular} alt={description} />
, 會ref
作為屬性傳遞,并且在呈現它的函數中,它將實際的 DOM 節點分配給ref.current
。

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