كيف يمكنني استخدام عدة مراجع لمجموعة من العناصر ذات الخطافات؟

يمكنك عمل ذلك بأن تقوم بعمل array of refs وليس مرجع واحد كالآتي 
 

const { useRef, useState, useEffect, createRef } = React;

const App = () => {
  // const elRef = useRef();
  const dataRefs = useRef(data.posts.map(() => createRef())); // مصفوفة من ال مراجع
  

  return (
    <div>
      {data && data.posts.map((post، index) => (
        <div ref={elementsRef.current[index]} > // هنا نستخرج المرجع المخصص لكل عنصر بناء على ال index
           {post.tilte}
        </div>
      ))}
    </div>
  );
};

يمكننا تحقيق هذا عن طريق استخدام useRef مع createRef.

const data = {
  posts: [
    { title: 'كورس جافاسكريبت' },
    { title: 'كورس علوم الكمبيوتر' }
  ]
};

/**
 * سنقوم بكتابة مكون يطبع عناوين المقالات وبه مدخل نصي
 * .وزر لتغيير لون العناوين
 */
const App = () => {
  // .نستخدمها بالطريقة العادية للحصول على قيمة اللون
  const colorRef = React.useRef(null);

  // .هنا سنقوم بحفظ المراجع للمقالات
  // .ستلاحظ هنا ان قيمة المرجع هي مصفوفة من المراجع
  const references = React.useRef(
    data.posts.map(() => React.createRef())
  );

  // .دالة بسيطة للحصول على اللون ونداء العناصر لكل مرجع
  const changeColor = color => {
    // .لاحظ كيف يتم الوصول لمرجع كل مقالة
    references.current.forEach(ref => {
      ref.current.style.color = color;
    });
  };

  return (
    <div>
      {
        data && data.posts.map((post, id) => (
          <div ref={references.current[id]}>
            <h1>{post.title}</h1>
          </div>
        ))
      }
      <input ref={colorRef} type="text" placeholder="#AEF266" />
      <button onClick={() => {
          changeColor(colorRef.current.value);
      }}>تغيير اللون</button>
    </div>
  );
};

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