From ad58ed367ab101510091165e36818e57640b3811 Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Mon, 1 May 2023 00:14:23 +0700 Subject: [PATCH 01/10] docs(translation): translate `useImperativeHandle` --- src/content/reference/react/useImperativeHandle.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 88f9a9f12..6b12c7f55 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -4,7 +4,7 @@ title: useImperativeHandle -`useImperativeHandle` is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-dom-with-refs) +`useImperativeHandle` adalah sebuah React Hook yang memungkinkan Anda menyesuaikan penanganan yang diekspos sebagai [ref.](/learn/manipulating-the-dom-with-refs) ```js useImperativeHandle(ref, createHandle, dependencies?) @@ -16,11 +16,11 @@ useImperativeHandle(ref, createHandle, dependencies?) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/} -Call `useImperativeHandle` at the top level of your component to customize the ref handle it exposes: +Panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda untuk mengkustomisasi penanganan yang diekspos oleh ref: ```js import { forwardRef, useImperativeHandle } from 'react'; @@ -38,11 +38,11 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parameters {/*parameters*/} -* `ref`: The `ref` you received as the second argument from the [`forwardRef` render function.](/reference/react/forwardRef#render-function) +* `ref`: `ref` yang Anda terima sebagai argumen ke-dua dari [fungsi render `forwardRef`.](/reference/react/forwardRef#render-function) -* `createHandle`: A function that takes no arguments and returns the ref handle you want to expose. That ref handle can have any type. Usually, you will return an object with the methods you want to expose. +* `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe any. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. -* **optional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If a re-render resulted in a change to some dependency, or if you omitted this argument, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref. +* **opsional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If a re-render resulted in a change to some dependency, or if you omitted this argument, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref. #### Returns {/*returns*/} @@ -50,7 +50,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} ### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/} From 7dbaf09a613adac2d9d0fb980f17d0fc553db1c9 Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Mon, 1 May 2023 00:53:14 +0700 Subject: [PATCH 02/10] docs: update dependency parameter translation --- src/content/reference/react/useImperativeHandle.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 6b12c7f55..2886d1fcb 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -42,11 +42,11 @@ const MyInput = forwardRef(function MyInput(props, ref) { * `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe any. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. -* **opsional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If a re-render resulted in a change to some dependency, or if you omitted this argument, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref. +* **opsional** `dependencies`: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *re-render* menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditempatkan ke `ref`. #### Returns {/*returns*/} -`useImperativeHandle` returns `undefined`. +`useImperativeHandle` mengembalikan `undefined`. --- From eaaf130889d1c845a4b706d12d2dd6c06ead87e1 Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Mon, 1 May 2023 01:10:25 +0700 Subject: [PATCH 03/10] docs: update usage translation --- src/content/reference/react/useImperativeHandle.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 2886d1fcb..3e29421b0 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -40,7 +40,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { * `ref`: `ref` yang Anda terima sebagai argumen ke-dua dari [fungsi render `forwardRef`.](/reference/react/forwardRef#render-function) -* `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe any. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. +* `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe *any*. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. * **opsional** `dependencies`: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *re-render* menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditempatkan ke `ref`. @@ -52,9 +52,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { ## Penggunaan {/*usage*/} -### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/} +### Mengekspos sebuah penanganan ref kustom kepada komponen induk {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -By default, components don't expose their DOM nodes to parent components. For example, if you want the parent component of `MyInput` to [have access](/learn/manipulating-the-dom-with-refs) to the `` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef) +Secara bawaan, komponen tidak mengekspos *DOM nodes* kepada komponen induk. Sebagai contoh, jika Anda menginginkan komponen induk dari `MyInput` untuk [memiliki akses](/learn/manipulating-the-dom-with-refs) terhadap *DOM node* dari ``, Anda harus menyertakannya dengan [`forwardRef`:](/reference/react/forwardRef) ```js {4} import { forwardRef } from 'react'; @@ -64,7 +64,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -With the code above, [a ref to `MyInput` will receive the `` DOM node.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component: +Dengan kode di atas, [sebuah *ref* yang diteruskan ke komponen `MyInput` akan menerima *DOM node* dari ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Namun, Anda dapat mengekspos sebuah nilai kustom. Untuk mengkustom penanganan yang diekspos, panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda: ```js {4-8} import { forwardRef, useImperativeHandle } from 'react'; @@ -80,7 +80,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Note that in the code above, the `ref` is no longer forwarded to the ``. +Perlu dicatat bahwa dalam kode diatas, `ref` tidak lagi diteruskan kepada ``. For example, suppose you don't want to expose the entire `` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call: From 78e63487d05e41712ee917376b54fbb57138ceef Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Mon, 1 May 2023 01:12:37 +0700 Subject: [PATCH 04/10] docs: add missing space --- src/content/reference/react/useImperativeHandle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 3e29421b0..2ad272e7a 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -80,7 +80,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Perlu dicatat bahwa dalam kode diatas, `ref` tidak lagi diteruskan kepada ``. +Perlu dicatat bahwa dalam kode di atas, `ref` tidak lagi diteruskan kepada ``. For example, suppose you don't want to expose the entire `` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call: From 5be9b5a07dedf9b01d7f4b529733aee4f6ac074d Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Wed, 3 May 2023 12:24:48 +0700 Subject: [PATCH 05/10] docs: translate exposing-your-own-imperative-methods and pitfall section --- .../reference/react/useImperativeHandle.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 2ad272e7a..d8e91b33c 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -4,7 +4,7 @@ title: useImperativeHandle -`useImperativeHandle` adalah sebuah React Hook yang memungkinkan Anda menyesuaikan penanganan yang diekspos sebagai [ref.](/learn/manipulating-the-dom-with-refs) +`useImperativeHandle` adalah sebuah React Hook yang memungkinkan Anda menyesuaikan penanganan yang diekspos sebagai [*ref*.](/learn/manipulating-the-dom-with-refs) ```js useImperativeHandle(ref, createHandle, dependencies?) @@ -20,7 +20,7 @@ useImperativeHandle(ref, createHandle, dependencies?) ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/} -Panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda untuk mengkustomisasi penanganan yang diekspos oleh ref: +Panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda untuk menyesuaikan penanganan yang diekspos oleh *ref*: ```js import { forwardRef, useImperativeHandle } from 'react'; @@ -38,7 +38,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parameters {/*parameters*/} -* `ref`: `ref` yang Anda terima sebagai argumen ke-dua dari [fungsi render `forwardRef`.](/reference/react/forwardRef#render-function) +* `ref`: *ref* yang Anda terima sebagai argumen ke-dua dari [fungsi render `forwardRef`.](/reference/react/forwardRef#render-function) * `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe *any*. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. @@ -82,7 +82,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { Perlu dicatat bahwa dalam kode di atas, `ref` tidak lagi diteruskan kepada ``. -For example, suppose you don't want to expose the entire `` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call: +Sebagai contoh, jika Anda tidak ingin mengekspos keseluruhan *DOM Node* dari ``, namun Anda ingin mengekspos dua metoda dari metoda yang tersedia di dalamnya: `focus` dan `scrollIntoView`. Untuk melakukan hal tersebut, pertahankan `DOM` peramban yang asli ke dalam *ref* yang terpisah. Kemudian gunakan `useImperativeHandle` untuk mengekspos sebuah penanganan dengan metoda yang Anda ingin panggil melalui komponen induk: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Now, if the parent component gets a ref to `MyInput`, it will be able to call the `focus` and `scrollIntoView` methods on it. However, it will not have full access to the underlying `` DOM node. +Sekarang, jika komponen induk mendapatkan sebuah *ref* yang merujuk pada `MyInput`, komponen tersebut akan dapat memanggil metoda `focus` dan `scrollIntoView`. Meskipun begitu, komponen induk tersebut tidak akan memiliki akses penuh terhadap *DOM Node* `` yang mendasarinya. @@ -166,9 +166,9 @@ input { --- -### Exposing your own imperative methods {/*exposing-your-own-imperative-methods*/} +### Mengekspos metoda imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} -The methods you expose via an imperative handle don't have to match the DOM methods exactly. For example, this `Post` component exposes a `scrollAndFocusAddComment` method via an imperative handle. This lets the parent `Page` scroll the list of comments *and* focus the input field when you click the button: +Metoda yang diekspos melalui penanganan imperatif tidak harus sesuai dengan metoda *DOM* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah metoda `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: @@ -281,8 +281,8 @@ export default AddComment; -**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on. +**Jangan terlalu sering menggunakan refs.** Anda hanya boleh menggunakan *refs* untuk perilaku *imperatif* yang tidak dapat Anda ungkapkan sebagai *props*: misalnya, menggulir ke sebuah *node*, memfokuskan sebuah *node*, memicu sebuah animasi, memilih teks, dan sebagainya. -**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like ``. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props. +**Jika Anda dapat mengekspresikan sesuatu sebagai *prop*, Anda tidak boleh menggunakan *ref*.** Sebagai contoh, daripada mengekspos penanganan imperatif seperti `{ open, close }` dari komponen `Modal`, lebih baik menggunakan `isOpen` sebagai *prop* seperti ``. [Effects](/learn/synchronizing-with-effects) dapat membantu Anda mengekspos perilaku imperatif melalui *props*. From bc35d4564adb7d23f1553a84f882d898f7ce7bf6 Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Wed, 3 May 2023 14:09:58 +0700 Subject: [PATCH 06/10] docs: update method wordings --- src/content/reference/react/useImperativeHandle.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index d8e91b33c..aa6f53781 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -38,13 +38,13 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parameters {/*parameters*/} -* `ref`: *ref* yang Anda terima sebagai argumen ke-dua dari [fungsi render `forwardRef`.](/reference/react/forwardRef#render-function) +* `ref`: *ref* yang Anda terima sebagai argumen ke-dua dari [fungsi *render* `forwardRef`.](/reference/react/forwardRef#render-function) * `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe *any*. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. -* **opsional** `dependencies`: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *re-render* menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditempatkan ke `ref`. +* **opsional** `dependencies`: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *render* ulang menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditempatkan ke `ref`. -#### Returns {/*returns*/} +#### Kembalian {/*returns*/} `useImperativeHandle` mengembalikan `undefined`. @@ -82,7 +82,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { Perlu dicatat bahwa dalam kode di atas, `ref` tidak lagi diteruskan kepada ``. -Sebagai contoh, jika Anda tidak ingin mengekspos keseluruhan *DOM Node* dari ``, namun Anda ingin mengekspos dua metoda dari metoda yang tersedia di dalamnya: `focus` dan `scrollIntoView`. Untuk melakukan hal tersebut, pertahankan `DOM` peramban yang asli ke dalam *ref* yang terpisah. Kemudian gunakan `useImperativeHandle` untuk mengekspos sebuah penanganan dengan metoda yang Anda ingin panggil melalui komponen induk: +Sebagai contoh, jika Anda tidak ingin mengekspos keseluruhan *DOM Node* dari ``, namun Anda ingin mengekspos dua *method* yang tersedia di dalamnya: `focus` dan `scrollIntoView`. Untuk melakukan hal tersebut, pertahankan `DOM` peramban yang asli ke dalam *ref* yang terpisah. Kemudian gunakan `useImperativeHandle` untuk mengekspos sebuah penanganan dengan *methods* yang Anda ingin panggil melalui komponen induk: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Sekarang, jika komponen induk mendapatkan sebuah *ref* yang merujuk pada `MyInput`, komponen tersebut akan dapat memanggil metoda `focus` dan `scrollIntoView`. Meskipun begitu, komponen induk tersebut tidak akan memiliki akses penuh terhadap *DOM Node* `` yang mendasarinya. +Sekarang, jika komponen induk mendapatkan sebuah *ref* yang merujuk pada `MyInput`, komponen tersebut akan dapat memanggil *method* `focus` dan `scrollIntoView`. Meskipun begitu, komponen induk tersebut tidak akan memiliki akses penuh terhadap *DOM Node* `` yang mendasarinya. @@ -166,9 +166,9 @@ input { --- -### Mengekspos metoda imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} +### Mengekspos *methods* imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} -Metoda yang diekspos melalui penanganan imperatif tidak harus sesuai dengan metoda *DOM* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah metoda `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: +*Methods* yang diekspos melalui penanganan imperatif tidak harus sesuai dengan *DOM Method* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah *method* `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: From 4650ebe1547cdceb3fcf43cb2bede4f8fb0b32a3 Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Wed, 3 May 2023 14:30:56 +0700 Subject: [PATCH 07/10] docs: translate parameters --- src/content/reference/react/useImperativeHandle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index aa6f53781..7bc6b0a88 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -36,7 +36,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { [See more examples below.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} * `ref`: *ref* yang Anda terima sebagai argumen ke-dua dari [fungsi *render* `forwardRef`.](/reference/react/forwardRef#render-function) From 95b0c876f4a14235f4ba5575f45f8e72c9bc9ae3 Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Wed, 3 May 2023 21:12:44 +0700 Subject: [PATCH 08/10] docs: remove italic in heading Co-authored-by: Resi Respati --- src/content/reference/react/useImperativeHandle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 7bc6b0a88..5749a9df9 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -166,7 +166,7 @@ input { --- -### Mengekspos *methods* imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} +### Mengekspos methods imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} *Methods* yang diekspos melalui penanganan imperatif tidak harus sesuai dengan *DOM Method* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah *method* `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: From 2f1416d6f8daeb074ead6f2ff34b41a644a4db5a Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Thu, 4 May 2023 09:02:20 +0700 Subject: [PATCH 09/10] docs: revise translations --- .../reference/react/useImperativeHandle.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 5749a9df9..fb4c49539 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -20,7 +20,7 @@ useImperativeHandle(ref, createHandle, dependencies?) ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/} -Panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda untuk menyesuaikan penanganan yang diekspos oleh *ref*: +Panggil fungsi `useImperativeHandle` di tingkat teratas komponen Anda untuk menyesuaikan penanganan yang diekspos oleh *ref*: ```js import { forwardRef, useImperativeHandle } from 'react'; @@ -34,15 +34,15 @@ const MyInput = forwardRef(function MyInput(props, ref) { // ... ``` -[See more examples below.](#usage) +[Lihat lebih banyak contoh di bawah.](#usage) #### Parameter {/*parameters*/} -* `ref`: *ref* yang Anda terima sebagai argumen ke-dua dari [fungsi *render* `forwardRef`.](/reference/react/forwardRef#render-function) +* `ref`: *ref* yang Anda terima sebagai argumen kedua dari [fungsi *render* `forwardRef`.](/reference/react/forwardRef#render-function) * `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe *any*. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. -* **opsional** `dependencies`: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *render* ulang menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditempatkan ke `ref`. +* `dependencies` **opsional**: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam tubuh komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *render* ulang menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditetapkan kepada `ref` tersebut. #### Kembalian {/*returns*/} @@ -64,7 +64,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Dengan kode di atas, [sebuah *ref* yang diteruskan ke komponen `MyInput` akan menerima *DOM node* dari ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Namun, Anda dapat mengekspos sebuah nilai kustom. Untuk mengkustom penanganan yang diekspos, panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda: +Dengan kode di atas, [sebuah *ref* yang diteruskan ke komponen `MyInput` akan menerima simpul DOM dari ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Namun, Anda dapat mengekspos sebuah nilai kustom. Untuk mengkustom penanganan yang diekspos, panggil fungsi `useImperativeHandle` di tingkat atas komponen Anda: ```js {4-8} import { forwardRef, useImperativeHandle } from 'react'; @@ -82,7 +82,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { Perlu dicatat bahwa dalam kode di atas, `ref` tidak lagi diteruskan kepada ``. -Sebagai contoh, jika Anda tidak ingin mengekspos keseluruhan *DOM Node* dari ``, namun Anda ingin mengekspos dua *method* yang tersedia di dalamnya: `focus` dan `scrollIntoView`. Untuk melakukan hal tersebut, pertahankan `DOM` peramban yang asli ke dalam *ref* yang terpisah. Kemudian gunakan `useImperativeHandle` untuk mengekspos sebuah penanganan dengan *methods* yang Anda ingin panggil melalui komponen induk: +Sebagai contoh, jika Anda tidak ingin mengekspos keseluruhan simpul DOM dari ``, namun Anda ingin mengekspos dua *methods* yang tersedia di dalamnya: `focus` dan `scrollIntoView`. Untuk melakukan hal tersebut, pertahankan DOM peramban yang asli ke dalam *ref* yang terpisah. Kemudian gunakan `useImperativeHandle` untuk mengekspos sebuah penanganan hanya dengan *methods* yang ingin Anda panggil melalui komponen induk: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Sekarang, jika komponen induk mendapatkan sebuah *ref* yang merujuk pada `MyInput`, komponen tersebut akan dapat memanggil *method* `focus` dan `scrollIntoView`. Meskipun begitu, komponen induk tersebut tidak akan memiliki akses penuh terhadap *DOM Node* `` yang mendasarinya. +Sekarang, jika komponen induk mendapatkan sebuah *ref* yang merujuk pada `MyInput`, komponen tersebut akan dapat memanggil *method* `focus` dan `scrollIntoView`. Meskipun begitu, komponen induk tersebut tidak akan memiliki akses penuh terhadap simpul DOM `` yang mendasarinya. @@ -168,7 +168,7 @@ input { ### Mengekspos methods imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} -*Methods* yang diekspos melalui penanganan imperatif tidak harus sesuai dengan *DOM Method* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah *method* `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: +*Methods* yang diekspos melalui penanganan imperatif tidak harus sesuai dengan *DOM methods* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah *method* `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: @@ -281,8 +281,8 @@ export default AddComment; -**Jangan terlalu sering menggunakan refs.** Anda hanya boleh menggunakan *refs* untuk perilaku *imperatif* yang tidak dapat Anda ungkapkan sebagai *props*: misalnya, menggulir ke sebuah *node*, memfokuskan sebuah *node*, memicu sebuah animasi, memilih teks, dan sebagainya. +**Jangan terlalu sering menggunakan refs.** Anda hanya boleh menggunakan *refs* untuk perilaku *imperatif* yang tidak dapat Anda ungkapkan sebagai *props*: misalnya, menggulir ke sebuah simpul, memfokuskan sebuah simpul, memicu sebuah animasi, memilih teks, dan sebagainya. -**Jika Anda dapat mengekspresikan sesuatu sebagai *prop*, Anda tidak boleh menggunakan *ref*.** Sebagai contoh, daripada mengekspos penanganan imperatif seperti `{ open, close }` dari komponen `Modal`, lebih baik menggunakan `isOpen` sebagai *prop* seperti ``. [Effects](/learn/synchronizing-with-effects) dapat membantu Anda mengekspos perilaku imperatif melalui *props*. +**Jika Anda dapat mengekspresikan sesuatu sebagai *prop*, Anda tidak seharusnya menggunakan *ref*.** Sebagai contoh, alih-alih mengekspos penanganan imperatif seperti `{ open, close }` dari sebuah komponen `Modal`, lebih baik menggunakan `isOpen` sebagai *prop* seperti ``. [Efek](/learn/synchronizing-with-effects) dapat membantu Anda mengekspos perilaku imperatif melalui *props*. From b06bc5d6fce0b2d094a47708e8c9f4d169ccc70d Mon Sep 17 00:00:00 2001 From: Agustinus Nathaniel Date: Thu, 4 May 2023 09:11:09 +0700 Subject: [PATCH 10/10] docs: adjust translations --- src/content/reference/react/useImperativeHandle.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index fb4c49539..e5e5b85f0 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -40,7 +40,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { * `ref`: *ref* yang Anda terima sebagai argumen kedua dari [fungsi *render* `forwardRef`.](/reference/react/forwardRef#render-function) -* `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan ref yang ingin Anda ekspos. Penanganan ref tersebut dapat memiliki tipe *any*. Biasanya, Anda akan mengembalikan sebuah object dengan sekumpulan metode yang ingin Anda ekspos. +* `createHandle`: Sebuah fungsi yang tidak mengambil argumen dan mengembalikan penanganan *ref* yang ingin Anda ekspos. Penanganan *ref* tersebut dapat memiliki tipe apapun. Biasanya, Anda akan mengembalikan sebuah objek dengan sekumpulan metode yang ingin Anda ekspos. * `dependencies` **opsional**: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam tubuh komponen. Jika *linter* Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika sebuah *render* ulang menghasilkan sebuah perubahan terhadap beberapa *dependency*, atau jika Anda menghilangkan argumen ini, fungsi `createHandle` Anda akan dijalankan ulang, dan penanganan yang baru dibuat akan ditetapkan kepada `ref` tersebut. @@ -54,7 +54,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { ### Mengekspos sebuah penanganan ref kustom kepada komponen induk {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -Secara bawaan, komponen tidak mengekspos *DOM nodes* kepada komponen induk. Sebagai contoh, jika Anda menginginkan komponen induk dari `MyInput` untuk [memiliki akses](/learn/manipulating-the-dom-with-refs) terhadap *DOM node* dari ``, Anda harus menyertakannya dengan [`forwardRef`:](/reference/react/forwardRef) +Secara bawaan, komponen tidak mengekspos simpul-simpul DOM (*DOM Nodes*) kepada komponen induk. Sebagai contoh, jika Anda menginginkan komponen induk dari `MyInput` untuk [memiliki akses](/learn/manipulating-the-dom-with-refs) terhadap simpul DOM dari ``, Anda harus menyertakannya dengan [`forwardRef`:](/reference/react/forwardRef) ```js {4} import { forwardRef } from 'react'; @@ -168,7 +168,7 @@ input { ### Mengekspos methods imperatif Anda sendiri {/*exposing-your-own-imperative-methods*/} -*Methods* yang diekspos melalui penanganan imperatif tidak harus sesuai dengan *DOM methods* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah *method* `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: +*Methods* yang diekspos melalui penanganan imperatif tidak harus sesuai dengan *DOM methods* secara persis. Sebagai contoh, komponen `Post` berikut mengekspos sebuah *method* `scrollAndFocusAddComment` melalui penanganan imperatif. Hal ini memungkinkan induk `Page` menggulir (*scroll*) daftar komentar *dan* memfokuskan bidang input ketika Anda mengklik tombol: