ترکیب کامپوننت‌ها و دسترسی امری در React – استفاده از children و کنترل فوکوس با useRef

مقدمه

اپلیکیشن‌های React از مجموعه‌ای از کامپوننت‌ها تشکیل شده‌اند که به‌صورت درختی سازمان‌دهی می‌شوند. اگرچه معمولاً کامپوننت‌ها را به‌صورت تگ بسته استفاده می‌کنیم، React اجازه می‌دهد از تگ باز و بسته استفاده کنیم — قابلیتی که به آن ترکیب کامپوننت‌ها گفته می‌شود.

استفاده از children برای ترکیب

به‌جای ارسال پراپ label، می‌توان محتوا را بین تگ‌های کامپوننت قرار داد:

<InputWithLabel ...>
  Search:
</InputWithLabel>

درون کامپوننت، این محتوا از طریق پراپ children قابل دسترسی است:

const InputWithLabel = ({ id, value, onInputChange, children }) => (
  <>
    <label htmlFor={id}>{children}</label>
     
    <input id={id} value={value} onChange={onInputChange} />
  
);

این روش امکان تزریق رشته، عناصر HTML یا حتی کامپوننت‌های React را فراهم می‌کند.

فوکوس declarative با autoFocus

برای فوکوس خودکار روی فیلد ورودی، می‌توان از ویژگی autoFocus استفاده کرد:

<input autoFocus />

برای کنترل این رفتار از بیرون، پراپ isFocused را تعریف می‌کنیم:

<InputWithLabel isFocused />

و درون کامپوننت از آن استفاده می‌کنیم:

<input autoFocus={isFocused} />

فوکوس امری با useRef

برای کنترل دقیق‌تر، می‌توان فوکوس را به‌صورت امری با useRef و useEffect انجام داد:

const inputRef = React.useRef();

React.useEffect(() => {
  if (isFocused && inputRef.current) {
    inputRef.current.focus();
  }
}, [isFocused]);

سپس ref را به عنصر ورودی متصل می‌کنیم:

<input ref={inputRef} ... />

مراحل گام‌به‌گام

• (A) ایجاد ref با useRef
• (B) اتصال ref به ویژگی ref عنصر ورودی
• (C) استفاده از useEffect برای اجرای فوکوس هنگام تغییر isFocused
• (D) دسترسی به عنصر DOM از طریق ref.current و اجرای focus()

جمع‌بندی

ترکیب کامپوننت‌ها با پراپ children امکان طراحی رابط‌های منعطف و قابل ترکیب را فراهم می‌کند. همچنین با استفاده از useRef می‌توان به عناصر DOM به‌صورت امری دسترسی داشت. این الگوها برای ساخت کامپوننت‌های قابل استفاده مجدد، مقیاس‌پذیر و تعاملی در React ضروری هستند.