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，您正在与框架作斗争，并且由于您做出错误的反应，即使您确实设法提出了一个在这种情况下的工作解决方案。