reactjs - 检测子引用何时发生变化

Question

我有以下问题:
有一个子组件接受从父组件传递过来的 ref:

const ChildComp = React.forwardRef((props, ref) => <div ref={ref} />)

父组件创建一个 ref 数组，并将数组中的一个 ref 分配给其中一个子组件:

const ParentComp = () => {
 const items = [1,2,3]
 const refs = items.map(() => React.createRef()) 

 React.useEffect(() => {
  console.log(refs);
 }, [refs])

 return <div>{items.map((item, index) => <ChildComp ref={refs[index]>)}</div>
}

但是，当我在 useEffect 中输出 refs 数组的状态时，它只在父级挂载时输出一次，此时 ref.current 值仍然为空，因为子级尚未安装。
我希望能够拥有一个 refs 数组，其中每个 ref 都属于一个 child ，如上所示。

Answer 1

这是一个有效的 Codesandbox:https://codesandbox.io/s/currying-leaf-tpibl?file=/src/App.tsx
我稍微修改了你的例子:

仅使用功能组件，因为字符串引用(来自 createRef )不应与它们一起使用

使用 callback refs而不是创建它们，它将对节点的变化使用react

重要的部分是 refProp={(node) => (itemsRef.current[index] = node)} ,
这将填充 itemsRef通过 ChildComp 基于回调引用的数组.
ChildComp

const ChildComp = ({
  number,
  refProp
}: {
  number: number;
  refProp: (node: HTMLDivElement) => void;
}) => {
  // simulate internal child state for demonstration
  const [childState, setChildState] = useState(0);

  useEffect(() => setChildState(number * 2), [number]);

  return (
    <div ref={refProp}>
      <p>
        State from child no. {number}: {childState}
      </p>
    </div>
  );
};

母公司

const ParentComp = () => {
  const [items] = useState([1, 2, 3]);
  // you can access the elements with itemsRef.current[n]
  const itemsRef = useRef<Array<HTMLDivElement | null>>([]);

  useEffect(() => {
    // create initial refs array, will be filled through callback ref
    itemsRef.current = itemsRef.current.slice(0, items.length);
  }, [items]);

  useEffect(() => {
    // this logs the three <div>s of the childs
    console.log(itemsRef);
  }, [itemsRef]);

  return (
    <>
      <p>Hi from parent!</p>
      {items.map((_, index) => (
        <ChildComp
          key={index}
          number={index + 1}
          // will be called by React when they're changing
          refProp={(node) => (itemsRef.current[index] = node)}
        />
      ))}
    </>
  );
};