useRef 和 useEffect 初始访问，然后使用 useRef

Question

我如何才能等待 ref 准备好，但也只能在我的使用效果内工作？

这是我想要做的：

我想 select 当弹出窗口可见时，我的 DataGrid 组件中的所有行都使用 ref。

此代码无效，因为我当时没有引用当前实例。

useEffect(() => {
  if (isVisible) {
    dataGridRef.current.instance.selectAll()
  }
}, [isVisible])

所以我搜索并找到了 useCallback 在连接 ref 时进行更新。

const dataGridRef = useCallback(node => {
    if (node !== null) {
      node.instance.selectAll()
    }
  }, [])

<DataGrid ref={dataGridRef} ..

但是这一次，当我必须重置时我不能使用 ref 实例（unselect data grid using ref）

Answer 1

你可以尝试做类似的事情

    useEffect(() => {
  if (isVisible && dataGridRef?.current) {
    dataGridRef.current.instance.selectAll()
  }
}, [isVisible])

此外，您可以链接 ? 运算符来检查 null

Answer 2

当对节点进行更改时，您的回调 ref 将捕获，并且在同一函数执行中，您可以随心所欲地更新要在回调外部引用的 ref 对象。

// define a ref object and a ref function
const dataGridRef = useRef(null);
const dataGridFuncRef = useCallback(node => {

  // manually update the ref object each time the dom element changes
  dataGridRef.current = node.instance;
  node.instance?.selectAll();

}, []);

const deselectOnClick = (event) => {
  // now we can use the ref instance outside the callback
  dataGridRef.current?.instance?.deselectAll();
}

// ... inside the render function ...

<DataGrid ref={dataGridFuncRef} />

这里是上述概念的example CodeSandbox。

useRef 和 useEffect 初始访问，然后使用 useRef

useRef and useEffect initial access and then later usage of useRef

reactjs

use-effect

use-ref

usecallback

react-usecallback