如何解决React:有条件地以 ref 作为道具渲染元素,有时 ref 丢失
这是我的组件:
// 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% 确定条件为真
解决方法
如果您的任务只是专注于特定领域,那么您可能会发现此解决方案很有用。
停止通过 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 }}
/>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。