Map 子引用到父数组

Question

I attempting to map an array of children but to assign a ref to them as I do it so I can track their positions from in the parent.

However, I need to store each ref in an array.

I've attempted the below, but I get a ref containing an array . How could I modify it to get an array of refs ?

This is so that I can track the element positions using a getBoundingClientRect() hook

export default function ({ children }) => {
  const itemsRef = useRef([]);

  console.log(itemsRef);
  // returns a ref containing an array
  // {current: Array(5)}
  
  // How could I modify what I am doing 
  // to to instead return an array of refs?
  // something like:
  // [{current: HTMLDivElement}, {current: HTMLDivElement}, .....]
  
  return (
    <>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          ref: (ref) => (
            <Item ref={(itemsRef.current[index] = ref)} key={index}>
              {child}
            </Item>
          )
        })
      )}
    </>
  );
};

Answer 1

Create the refs first (same size as your array) and pass it to your component. I check the childrenLength because it may change between renders.

export default function ({ children }) => {
  const itemsRef = useRef([]);
  const childrenLength = itemsRef;
  
  if (itemsRef.current.length != childrenLength) {
     itemsRef.current = Array(arrLength).fill().map((_, i) => itemsRef.current[i] || createRef());
  } 
  
  return (
    <>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          ref: (ref) => (
            <Item ref={itemsRef.current[index]} key={index}>
              {child}
            </Item>
          )
        })
      )}
    </>
  );
};

Answer 2

This should be easy

Here is an example how I would do it.

 export default function({children}: {children: React.ReactNode[]}) => { const itemsRef = useRef([]); console.log(itemsRef); refLoaded = () => { if (itemsRef.current.length == children.length) { // all ref are loaded, do you work here } } return ( <> { children.map((child, index) => ( <Item ref = {(c) => { if (c) itemsRef.current[index] = c; } key = { index } onLayout={refLoaded}> {child} </Item> ) ) } </> ); };