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

【问题标题】：React: conditionally render element with ref as a prop, sometimes ref is lostReact：以 ref 作为道具有条件地渲染元素，有时 ref 会丢失
【发布时间】：2021-06-02 06:11:29
【问题描述】：

这是我的组件：

// 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% 确定条件是正确的

【问题讨论】：

Refs 只有在组件被挂载后才会被激活，所以你是否使用任何useEffect 钩子来检查这个？
出于这个原因，您可能不应该有条件地分配 React refs。提前生成您需要的所有参考。
@Keith，是的，我正在使用这种 useEffect
@DrewReese，例如我有 400 个元素，你的意思是我应该生成 400 个引用吗？
@DrewReese，你将如何使用普通道具来做到这一点，在我的代码中我需要专注于 textarea 而没有参考我无法做到这一点

标签： javascript reactjs react-hooks react-ref

【解决方案1】：

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

停止通过 props 传递条件引用并为您的 DataResultValue 组件创建 bool prop isActive。该组件的每个实例都可以将 ref 存储到相应的 input/textarea 中，并在 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 }}
    />
  )
}

【讨论】：