React：以 ref 作為道具有條件地渲染元素，有時 ref 會丟失

Question

這是我的組件：

// parent component
const activeTextareaFieldRef = useRef(null);

return (
  <GroupField textareaRef={activeField.id === id ? activeTextareaFieldRef : null} />
)

// group field component
<>
  <DataResultValue ref={item.name === activeField.subFieldName ? textareaRef : null} />
</>

即使兩個條件（父母和孩子）都為真，參考有時會丟失並設置為 null。 我怎樣才能始終讓 ref 不等於 null？ 我修復了我能修復的所有東西，並且我 100% 確定條件是正確的

Answer 1

如果您的任務只是關注特定領域，那么也許您會發現此解決方案很有用。

停止通過 props 傳遞條件引用並為您的DataResultValue組件創建 bool prop isActive 。 該組件的每個實例都可以將 ref 存儲到相應的輸入/文本區域，並在isActive為真后立即將焦點放在其中。

例如：

const DataResultValue = ({ value, isActive }) => {
  const inputRef = React.useRef()
  
  React.useEffect(() => {
    if (isActive) {
      inputRef.current.focus()    
    }
  }, [isActive])
  
  return (
    <input
      ref={inputRef}
      defaultValue={value}
      style={{ color: isActive ? 'red' : null }}
    />
  )
}