مقدمه
اپلیکیشنهای 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 ضروری هستند.