Как выводить несколько компонентов React с доступом к ним по ref?

Question

[Alex]

Здравствуйте! Есть компонент React, который сейчас выводится в 1 экземпляре.

let compexample = useRef();
....
<CompExample ref={compexample} />
....

(внутри естественно имеется forwardRef)

Как теперь его вывести в цикле в зависимости от числового значение в state (кол-во копий) и иметь ref ссылки на все копии?
Пробовал сделать так:

const [numComp, setNumComp] = useState(1);
const compRefs = useRef([]);

   // Обновляем refs при изменении numComp
    useEffect(() => {
        compRefs.current = Array(numComp).fill(null);
    }, [numComp]);

    // Установка ref для каждого компонента
    const setRef = (el, index) => {
        compRefs.current[index] = el;
    };

   const handleClick = useCallback((index) => {
            console.log(compRefs.current[index]);
    });

Рендер

{[...Array(numComp)].map((_, index) => (
                        <CompExample ref={(el) => setRef(el, index)} onClick={() => handleClick(index)}/>
                ))}

в консоли по клику выводится null

Answer 1

[0xD34F]

в консоли по клику выводится null

Которые вы сами и установили в качестве значений ссылок на элементы - коллбек useEffect'а выполняется после ref'а, так что вы затираете только что сохранённые ссылки.

Вместо создания нового массива с null'ами вырезайте нужное из уже существующего:

- compRefs.current = Array(numComp).fill(null);
+ compRefs.current = compRefs.current.slice(0, numComp);

Comments

[Alex]

Спасибо за разъяснение по поводу очередности! Но если убрать заполнение, и вывести в эффекте в консоль current , то он вообще пустой массив. Т.е. если ref перед эффектом, то получается ссылки не проставляются.
Почему то конструкция ref={(el) => setRef(el, index)} получается не работает, хотя вроде в сети примеры именно такие.

[0xD34F]

Alex, да ну? Всё работает.

[Alex]

У меня почему то в проекте так не работает. Нашел способ один который рабочий

const compRefs = useRef([...Array(numComp)].map(() => React.createRef()));

{[...Array(numComp)].map((_, index) => (
                        <CompExample ref={compRefs.current[index]} onClick={() => handleClick(index)}/>
                    ))}

При таком подходе и при клике в консоли видно что в compRefs есть реф компонента, и в React Tools видно реф, а до этого был всегда null или пустой массив.
Но пока такая конструкция работает если менять state numComp в коде (т.е. менять число копий в useState(n)), если их менять слайдером то всегда остается в итоге один

[Alex]

0xD34F, я попробовал поменять проект на jsfiddle.net и я кажется понял в чем может быть причина такой разницы. У вас в примере forwardRef - ref уходит в дочерний элемент. У меня же он просто наделяется свойствами и функциями внутри компонента, чтобы читать и вызывать функции в родительском компоненте

ref.current = {
        var1, var2,
        func1, func2
    }

Если убрать ref у вас в примере с span, то refs становится пустым и в консоль выпадает undefined

[0xD34F]

Alex, уж не знаю, что за дичь вы там пытаетесь сделать, но и "наделение свойствами и функциями" тоже работает.

[Alex]

0xD34F, да нет ни какой дичи, просто ref нужен для методов внутренних чтоб управлять компонентом, а в рендере там другой компонент из npm.
Сделал как у вас в песочнице через ref({var1,var2,func1,func2}); и все заработало!
И кстати forwardRef убрал и просто в пропсы кинул ref, оказывается пока изучал мануалы увидел что он уже дедикейтед и теперь реф просто в пропсы кидается, да и еще теперь умеет очищаться через return () => {};

Спасибо большое за решение и подсказки! А то уже много часов сижу копаю почему это не работает.