diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index fefa59de6..8d85e43dd 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -4,7 +4,7 @@ title: forwardRef -`forwardRef` memungkinkan Anda mengekspos sebuah *DOM node* sebagai sebuah [ref](/learn/manipulating-the-dom-with-refs) kepada induknya. +`forwardRef` memungkinkan Anda mengekspos sebuah simpul DOM sebagai sebuah [ref](/learn/manipulating-the-dom-with-refs) kepada induknya. ```js const SomeComponent = forwardRef(render) @@ -32,11 +32,11 @@ const MyInput = forwardRef(function MyInput(props, ref) { [Lihat contoh lainnya di bawah ini.] (#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} * `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. -#### Mengembalikan {/*returns*/} +#### Kembalian {/*returns*/} `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`. @@ -62,13 +62,13 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -#### Parameters {/*render-parameters*/} +#### Parameter {/*render-parameters*/} * `props`: *props* yang dioperkan oleh komponen induk. * `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*/} +#### Kembalian {/*render-returns*/} `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`. @@ -76,9 +76,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { ## Penggunaan {/*usage*/} -### Mengekspos DOM node ke komponen induk {/*exposing-a-dom-node-to-the-parent-component*/} +### Mengekspos sebuah simpul DOM ke komponen induk {/*exposing-a-dom-node-to-the-parent-component*/} -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()`: +Secara *default*, simpul-simpul DOM dari setiap komponen bersifat privat. Namun, terkadang berguna untuk mengekspos simpul DOM 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) { }); ``` -Anda akan menerima ref sebagai argumen kedua setelah props. Berikan ke *DOM node* yang ingin Anda ekspos: +Anda akan menerima ref sebagai argumen kedua setelah props. Berikan ke simpul DOM yang ingin Anda ekspos: ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -131,9 +131,9 @@ function Form() { } ``` -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. +Komponen `MyInput` meneruskan *ref* tersebut ke tag peramban ``. Hasilnya, komponen `Form` dapat mengakses simpul DOM `` 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. +Perlu diingat bahwa mengekspos *ref* ke simpul DOM di dalam komponen Anda akan mempersulit untuk mengubah internal komponen Anda di kemudian hari. Anda biasanya akan mengekspos simpul DOM 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. @@ -194,7 +194,7 @@ input { #### Memutar dan menjeda video {/*playing-and-pausing-a-video*/} -Mengeklik tombol akan memanggil [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) dan [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) pada *DOM node* `