diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 739c94ae2..fefa59de6 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` memungkinkan Anda mengekspos sebuah *DOM node* sebagai sebuah [ref](/learn/manipulating-the-dom-with-refs) kepada induknya. ```js const SomeComponent = forwardRef(render) @@ -16,11 +16,11 @@ const SomeComponent = forwardRef(render) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +Panggil fungsi `forwardRef()` untuk membiarkan komponen Anda menerima *ref* dan meneruskannya ke komponen anak: ```js import { forwardRef } from 'react'; @@ -30,26 +30,26 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -[See more examples below.](#usage) +[Lihat contoh lainnya di bawah ini.] (#usage) #### 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`: Fungsi *render* untuk komponen Anda. React memanggil fungsi ini dengan *props* dan `ref` yang diterima komponen Anda dari induknya. JSX yang Anda kembalikan akan menjadi keluaran dari komponen Anda. -#### Returns {/*returns*/} +#### Mengembalikan {/*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` mengembalikan komponen React yang dapat Anda *render* di JSX. Tidak seperti komponen React yang didefinisikan sebagai fungsi biasa, komponen yang dikembalikan oleh `forwardRef` juga dapat menerima *prop* `ref`. -#### Caveats {/*caveats*/} +#### Peringatan {/*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. +* Dalam Mode Ketat, React akan **memanggil fungsi *render* Anda dua kali** untuk [membantu Anda menemukan ketidakmurnian yang tidak disengaja.](#my-initializer-or-updater-function-runs-twice) Ini adalah perilaku khusus pengembangan dan tidak mempengaruhi produksi. Jika fungsi *render* Anda murni (sebagaimana mestinya), hal ini tidak akan mempengaruhi logika komponen Anda. Hasil dari salah satu pemanggilan akan diabaikan. --- ### `render` function {/*render-function*/} -`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`: +`forwardRef` menerima fungsi *render* sebagai argumen. React memanggil fungsi ini dengan `props` dan `ref`: ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -64,21 +64,21 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parameters {/*render-parameters*/} -* `props`: The props passed by the parent component. +* `props`: *props* yang dioperkan oleh komponen induk. -* `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`: Atribut `ref` yang dioper oleh komponen induk. `ref` dapat berupa objek atau fungsi. Jika komponen induk tidak mengoper *ref*, maka akan menjadi `null`. Anda harus mengoper `ref` yang Anda terima ke komponen lain, atau mengopernya ke [`useImperativeHandle`.](/reference/react/useImperativeHandle) #### 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` mengembalikan komponen React yang dapat Anda *render* di JSX. Tidak seperti komponen React yang didefinisikan sebagai fungsi biasa, komponen yang dikembalikan oleh `forwardRef` dapat mengambil sebuah *prop* `ref`. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/} +### Mengekspos DOM node ke komponen induk {/*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()`: +Secara *default*, setiap *DOM nodes* komponen bersifat privat. Namun, terkadang berguna untuk mengekspos *DOM node* ke induknya - misalnya, untuk memungkinkan pemfokusan. Untuk ikut serta, bungkus definisi komponen Anda ke dalam `forwardRef()`: ```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: +Anda akan menerima ref sebagai argumen kedua setelah props. Berikan ke *DOM node* yang ingin Anda ekspos: ```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`: +Hal ini memungkinkan komponen `Form` induk mengakses `` DOM node yang diekspos oleh `MyInput`: ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -131,15 +131,16 @@ 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. +Komponen `MyInput` meneruskan *ref* tersebut ke tag peramban ``. Hasilnya, komponen `Form` dapat mengakses *DOM node* `` tersebut dan memanggil fungsi [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) di atasnya. + +Perlu diingat bahwa mengekspos *ref* ke *DOM node* di dalam komponen Anda akan mempersulit untuk mengubah internal komponen Anda di kemudian hari. Anda biasanya akan mengekspos *DOM node* dari komponen tingkat rendah yang dapat digunakan kembali seperti tombol atau input teks, tetapi Anda tidak akan melakukannya untuk komponen tingkat aplikasi seperti avatar atau komentar. -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. -#### Focusing a text input {/*focusing-a-text-input*/} +#### Memfokuskan input teks {/*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 ``. +Mengeklik tombol akan memfokuskan input. Komponen `Form` mendefinisikan sebuah ref dan meneruskannya ke komponen `MyInput`. Komponen `MyInput` meneruskan *ref* tersebut ke tag peramban ``. Hal ini memungkinkan komponen `Form` memfokuskan ``. @@ -191,9 +192,9 @@ input { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### Memutar dan menjeda 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 `