React 组件崩溃问题：URL 解析期间 Ref 未初始化

Question

我有一个组件，如果被选择，它应该展开。这是我目前的方法：

<Element 
   ref={elementRef}
   style={{ height: isSelected ? `${elementRef.current.scrollHeight}px` : '0px' }} 
/>

现在，我添加了解析 URL 的路由。例如，如果我位于 host:port/selected/1，第一个元素应该自动展开。

URL 解析工作正常，但它发生在网站创建之初。

这会导致函数返回 JSX-Element 时，

isSelected

计算结果为

true

，这会导致问题，因为 ref 尚未初始化。 （

elementRef.current

是

null

）

或者换句话说：非渲染对象的滚动高度没有意义，React 告诉我是这样。

我正在努力找出处理这个问题的最佳方法。我想我需要使用与 useRef 不同的钩子，但是哪个？

我尝试将

useState

与依赖项

isSelected

和

elementRef

一起使用，它不会在渲染后触发，而是在渲染之前（或期间）触发。

Answer 1

如果在最初的渲染中尚未设置引用，那么您可以使用可选链接运算符和后备值。

示例：

<Element 
   ref={elementRef}
   style={{
     height: isSelected
       ? `${elementRef.current?.scrollHeight ?? 0}px`
       : '0px'
   }} 
/>