كيفية استخدام useRef و createRef بشكل صحيح في React مع TypeScript: كتابة أنواع المراجع
مرحبًا بالجميع! أنا مبتدئ في React و TypeScript، وأواجه مشكلة في استخدام المراجع. أحاول الوصول إلى عنصر DOM (مثل حقل الإدخال) عبر useRef، لكن TypeScript يعطي أخطاء في الأنواع باستمرار.
إليك الكود الخاص بي:
```typescript
import React, { useRef, useEffect } from 'react';
const MyComponent: React.FC = () => {
const inputRef = useRef(null); // خطأ: Argument of type 'null' is not assignable to parameter of type 'HTMLInputElement'
useEffect(() => {
inputRef.current?.focus(); // خطأ: Property 'focus' does not exist on type 'never'
}, []);
return ;
};
```
لقد جربت خيارات مختلفة، لكن TypeScript يشتكي إما من تهيئة `useRef(null)` أو من محاولة استدعاء `focus()`. جربت استخدام `createRef` — نفس القصة. في JavaScript كان هذا الكود يعمل دون مشاكل، أما في TypeScript فقد علقت.
أرجو إرشادي حول كيفية كتابة أنواع المراجع بشكل صحيح في React + TypeScript؟ هل أحتاج إلى تحديد نوع العنصر بشكل صريح؟ أم أن هناك طريقة أخرى؟