diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 10c2ad03d..695650d02 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -4,7 +4,7 @@ title: forwardRef -`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs) +`forwardRef` আপনার কম্পোনেন্টকে একটি DOM নোড একটি প্যারেন্ট কম্পোনেন্টে একটি [ref](/learn/manipulating-the-dom-with-refs) সহ এক্সপোজ করার সুযোগ দেয়। ```js const SomeComponent = forwardRef(render) @@ -16,11 +16,11 @@ const SomeComponent = forwardRef(render) --- -## Reference {/*reference*/} +## রেফারেন্স {/*reference*/} ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +`forwardRef()` কল করুন যেন আপনার কম্পোনেন্ট একটি ref রিসিভ করতে পারে এবং একটি চাইল্ড কম্পোনেন্টে ফরোয়ার্ড করতে পারেঃ ```js import { forwardRef } from 'react'; @@ -30,26 +30,26 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -[See more examples below.](#usage) +[নিচে আরো উদাহরণ দেখুন।](#usage) -#### Parameters {/*parameters*/} +#### প্যারামিটার {/*parameters*/} -* `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component. +* `render`: আপনার কম্পোনেন্টের রেন্ডার ফাংশন। আপনার কম্পোনেন্ট তার প্যারেন্ট থেকে যে প্রপ এবং `ref` পায় সেটা নিয়ে React এই ফাংশনে কল করে। আপনি যেই JSX রিটার্ন করবেন সেটা হবে আপনার কম্পোনেন্টের আউটপুট। -#### Returns {/*returns*/} +#### রিটার্ন {/*returns*/} -`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop. +`forwardRef` এমন একটা React কম্পোনেন্ট রিটার্ন করে যেটা আপনি JSX এ রেন্ডার করতে পারেন। সোজাসাপ্টা ফাংশন হিসেবে ডিফাইন করা React কম্পোনেন্টের সাথে এর অমিল এখানেই যে, `forwardRef` দ্বারা রিটার্ন হওয়া কম্পোনেন্ট একটা `ref` প্রপ রিসিভও করতে পারে। -#### Caveats {/*caveats*/} +#### সতর্কতা {/*caveats*/} -* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored. +* Strict Mode এ, React [আপনাকে accidental impurities খুঁজে বের করতে সাহায্য করার জন্য](#my-initializer-or-updater-function-runs-twice) **আপনার রেন্ডার ফাংশন দুবার কল করবে।** এটা development-only আচরণ এবং production এ কোন প্রভাব ফেলবে না। যদি আপনার রেন্ডার ফাংশন pure হয় (যেমন এর হওয়া উচিত), এটা আপনার কম্পোনেন্টের লজিকে কোন প্রভাব ফেলবার কথা না। দুটি কলের একটির ফলাফলকে আমলে আনা হবে না। --- -### `render` function {/*render-function*/} +### `render` ফাংশন {/*render-function*/} -`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`: +`forwardRef` একটি রেন্ডার ফাংশনকে একটি আর্গুমেন্ট হিসেবে গ্রহণ করে। React এই ফাংশনে `props` এবং `ref` সহ কল করেঃ ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -62,23 +62,23 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -#### Parameters {/*render-parameters*/} +#### প্যারামিটার {/*render-parameters*/} -* `props`: The props passed by the parent component. +* `props`: প্যারেন্ট কম্পোনেন্ট যে প্রপ পাস করে। -* `ref`: The `ref` attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle) +* `ref`: প্যারেন্ট কম্পোনেন্টের পাস করা `ref` এট্রিবিউট। এই `ref` হতে পারে অবজেক্ট বা ফাংশন। যদি প্যারেন্ট কম্পোনেন্ট কোন ref পাস না করে থাকে, এটা `null` হবে। আপনার রিসিভ করা `ref` অন্য একটি কম্পোনেন্টে পাস করা উচিত, অথবা [`useImperativeHandle` এ পাস করা উচিত।](/reference/react/useImperativeHandle) -#### Returns {/*render-returns*/} +#### রিটার্ন {/*render-returns*/} -`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop. +`forwardRef` একটি React কম্পোনেন্ট রিটার্ন করে যেটা আপনি JSX এ রেন্ডার করতে পারবেন। Plain ফাংশন হিসেবে সংজ্ঞায়িত React কম্পোনেন্টের সাথে এর অমিল এখানেই যে, `forwardRef` থেকে রিটার্ন করা কম্পোনেন্ট একটি `ref` প্রপ নিতে পারে। --- -## Usage {/*usage*/} +## ব্যবহার {/*usage*/} -### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/} +### প্যারেন্ট কম্পোনেন্টে একটি DOM নোড এক্সপোজ করা {/*exposing-a-dom-node-to-the-parent-component*/} -By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`: +ডিফল্ট ভাবে, প্রতিটা কম্পোনেন্টের DOM নোড প্রাইভেট। তবে, কখনো কখনো প্যারেন্টের দিকে একটা DOM নোড এক্সপোজ করা কাজে লাগতে পারে--যেমন, একে ফোকাসের সুযোগ দেবার জন্য। রটা করার জন্য আপনার কম্পোনেন্ট ডেফিনিশন `forwardRef()` দিয়ে wrap করে ফেলুনঃ ```js {3,11} import { forwardRef } from 'react'; @@ -94,7 +94,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -You will receive a ref as the second argument after props. Pass it to the DOM node that you want to expose: +আপনি props এর পর দ্বিতীয় আর্গুমেন্ট হিসেবে একটি ref রিসিভ করবেন। আপনি যেই DOM নোড এক্সপোজ করতে চান সেখানে এটি পাস করে দিনঃ ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -110,7 +110,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -This lets the parent `Form` component access the `` DOM node exposed by `MyInput`: +এইটা প্যারেন্ট `Form` কম্পোনেন্টকে `MyInput` এর কারণে এক্সপোজ হওয়া `` DOM নোড এক্সেসের সুযোগ দেয়। ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -131,15 +131,15 @@ function Form() { } ``` -This `Form` component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `` browser tag. As a result, the `Form` component can access that `` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it. +এই `Form` কম্পোনেন্টটি `MyInput` এ [একটি ref পাস করে।](/reference/react/useRef#manipulating-the-dom-with-a-ref) `MyInput` কম্পোনেন্ট এই ref কে `` ব্রাউজার ট্যাগে *ফরোয়ার্ড* করে দেয়। ফলে, `Form` কম্পোনেন্ট ঐ `` DOM নোডে এক্সেস করতে পারে এবং এতে [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) কল দিতে পারে। -Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment. +মনে রাখবেন যে, আপনার কম্পোনেন্টের মধ্যে একটি ref এক্সপোজ করার ফোলে আপনার কম্পোনেন্টের ভেতরকার তথ্য পরিবর্তন করা কঠিন হয়ে পড়ে। আপনি বাটন বা টেক্সট ইনপুটের মত পুনরায় ব্যবহারযোগ্য লো-লেভেল কম্পোনেন্ট থেকেই সাধরণত DOM nodes এক্সপোজ করবেন, কিন্তু আপনি এপ্লিকেশন-লেভেল কম্পোনেন্ট যেমন avatar বা কমেন্ট এর জন্য এটি করবেন না। - + -#### Focusing a text input {/*focusing-a-text-input*/} +#### একটি টেক্সট ইনপুটে ফোকাস করা {/*focusing-a-text-input*/} -Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser ``. This lets the `Form` component focus the ``. +বাটনে ক্লিক করা হলে ইনপুট ফোকাস হবে। `Form` কম্পোনেন্ট একটি ref ডিফাইন করে এবং `MyInput` কম্পোনেন্টে পাস করে দেয়। `MyInput` কম্পোনেন্ট সেই ref টি ব্রাউজার `` এ ফরোয়ার্ড করে দেয়। এর কারণে `Form` কম্পোনেন্ট `` এ ফোকাস করতে পারে। @@ -191,9 +191,9 @@ input { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### একটি ভিডিও চালানো এবং থামানো {/*playing-and-pausing-a-video*/} -Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `