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} />
</>

即使两个条件（在父级和子级中）都为真，引用有时也会丢失并设置为空。如何实现始终使 ref 不等于 null？我已尽我所能修复了所有条件，并且我 100% 确定条件为真

Answer 1

如果您的任务只是专注于特定领域，那么您可能会发现此解决方案很有用。

停止通过 props 传递条件引用并为您的 isActive 组件创建 bool prop DataResultValue。该组件的每个实例都可以将 ref 存储到相应的 input/textarea 中，并在 isActive prop 为真时将焦点放在其中。

例如：

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 }}
    />
  )
}

React：有条件地以 ref 作为道具渲染元素，有时 ref 丢失

1 个答案: