React - 如何跟蹤 useRef 孩子的變化

Question

我有一個組件 ( Comp )，我在其參數中添加了一個useRef ( compRef )。 作為主要 useEffect 的一部分 - 我正在設置此組件的數據。 該數據包含一個字符串數組，並且Comp將所有字符串顯示為input s -

<Comp ref={compRef}>
     <input type="text"/>
</Comp>

和

data = ["HIDDEN", "data1", "data2", "data3", "data4"]

useEffect(() => { 
     compRef.current.refElement.value = data;
}, []);

所以現在Comp看起來像這樣 -

<Comp>
<generatedWrap> // should be hidden
    <input value="HIDDEN" />
</generatedWrap>

<generatedWrap>
    <input value="data1" />
</generatedWrap>

<generatedWrap>
    <input value="data2" />
</generatedWrap>

<generatedWrap>
    <input value="data3" />
</generatedWrap>

<generatedWrap>
    <input value="data4" />
</generatedWrap>
</Comp>

我想用這個hide命令隱藏第一個輸入 -

compRef.current.refElement.children[0].style.display = "none";

問題是，對於我在安裝屏幕期間使用的每種方法（useEffect），孩子都是空的。 只有在屏幕准備好后它才能工作（即由<button>觸發）

我需要一種方法來在安裝視圖之前跟蹤 ref 的子項數量，並且一旦它大於 1 就可以觸發hide命令。

我怎樣才能做到這一點？

Answer 1

好的

因此，經過大量測試 - 我發現的唯一選擇是在Comp渲染后添加setTimeout(() => compRef.current.refElement.children[0].style.display = "none") 。

（渲染后仍然只有 1 個孩子，但 setTimeout 是異步的這一事實使其工作）

謝謝大家的幫助：）

Answer 2

我不確定我是否正確理解了這種情況，但這對我來說似乎很奇怪。

請記住，在 React 的范例中， refs更像是一個逃生艙，應該盡可能避免。

另外，請注意，對於非本地組件， ref可以轉發到任何元素，或以任何方式處理，因此假設它將是根元素是不安全的。

在任何情況下，您都可以進行以下操作：

<Comp>
     <input type="text" ref={(ref) => ref && (ref.parentElement.style.display = 'none')} />
</Comp>

這是我現在能想到的最干凈的方式。

請讓我知道它是否適合您。

更新：

ref中的 function 稱為Callback Ref 。 它將接收相應的ref值作為第一個參數（在本例中為 HTML input元素）。

優點是您不必檢測Comp何時決定填充 DOM。 一旦真正的節點准備好，回調 ref 就會被調用。

Answer 3

tldr - 永遠不要使用 refs 來操作 DOM （除非您是高級反應開發人員並且確切地知道自己在做什么，因為這些開發人員不會在 SO 上問這些問題）。

根本不要使用 refs，你通過手動操作 DOM 來做 React 大錯特錯。

只需將字符串作為道具傳遞，讓組件擔心顯示它們：

const MyParentComponent = () => {

   return <Comp data={["HIDDEN", "data1", "data2", "data3", "data4"]}/>
}

如果您想在該子組件中隱藏某個輸入，則傳遞另一個道具，例如：

const MyParentComponent = () => {

   const [indexToHide,setIndexToHide] = useState(0);

   return <Comp data={["HIDDEN", "data1", "data2", "data3", "data4"]} indexOfInputToHide={indexToHide}/>
}

然后讓Comp擔心它的道具，僅此而已。

目前尚不清楚您要嘗試做什么，因此這是您需要的確切代碼的可能性並不大。 但是，通過繼續嘗試使用 refs 和操作 DOM，您正在與框架作斗爭，並且由於您做出錯誤的反應，即使您確實設法提出了一個在這種情況下的工作解決方案。