Question

请考虑以下示例。我有一个div的 ref ，我想将此 ref 传递给 Child 。但如果我现在就按原样使用它，则当 ref 对象更新并存储正确的< em> HTML 元素。

我可以对此进行修复，并在useCallback中使用 callback 方法。只需取消注释行，然后就可以正常工作（两个解决方案），因为 parent 由于状态更新而重新呈现，因此正确的 ref 也从第一种方法传递

问题：是否有一种方法可以避免使用状态，并以某种方式让 Child 知道父对象中已更新的 ref 对象？

注意：我知道我可以在 Child 中使用useEffect并收听someRef的更改，但是我想访问< em> someRef 对象位于函数主体中，而不仅限于钩子主体中。

const { useState, useRef, useCallback } = React;

const Child = ({ someRef, node }) => {
  console.log(someRef, node); // someRef is always null and doesnt update...

  return null;
}

const App = () => {
  /* 1st approach */
  const someRef = useRef(null);
  
  /* 2nd approach */
  const [node, setNode] = useState(null);
  
  const someRef2 = useCallback(n => {
    if (n !== null) {
        // setNode(n)   <----- uncomment to see it works
    }
  }, []);
  
  return (
     <div>
      <div ref={someRef}>text1</div>
      <div ref={someRef2}>text2</div>
      <Child someRef={someRef} node={node} />
     </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 1

不，据我所知，无法进行ref更改的订阅/通知。

从useRef上的React docs：

请记住，useRef 内容更改时不会通知您。更改.current属性不会导致重新渲染。< / strong>如果您想在React将ref附加或分离到DOM节点时运行一些代码，则可能需要使用回调ref。

一天结束时，您的应用将必须响应状态变化。父母的或自己的孩子的状态。

您甚至可以在父级的渲染阶段更新ref，以使其与父级上的任何state更改保持“同步”。但是毕竟会触发更新的是state的更改，而不是引用的更改。

如何听“ ref”对象的变化？

1 个答案: