Skip to content

Commit 4778ad6

Browse files
docs(translation): adjust forwardRef docs translation (#540)
1 parent 894ba27 commit 4778ad6

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

Diff for: src/content/reference/react/forwardRef.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: forwardRef
44

55
<Intro>
66

7-
`forwardRef` memungkinkan Anda mengekspos sebuah *DOM node* sebagai sebuah [ref](/learn/manipulating-the-dom-with-refs) kepada induknya.
7+
`forwardRef` memungkinkan Anda mengekspos sebuah simpul DOM sebagai sebuah [ref](/learn/manipulating-the-dom-with-refs) kepada induknya.
88

99
```js
1010
const SomeComponent = forwardRef(render)
@@ -32,11 +32,11 @@ const MyInput = forwardRef(function MyInput(props, ref) {
3232

3333
[Lihat contoh lainnya di bawah ini.] (#usage)
3434

35-
#### Parameters {/*parameters*/}
35+
#### Parameter {/*parameters*/}
3636

3737
* `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.
3838

39-
#### Mengembalikan {/*returns*/}
39+
#### Kembalian {/*returns*/}
4040

4141
`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`.
4242

@@ -62,23 +62,23 @@ const MyInput = forwardRef(function MyInput(props, ref) {
6262
});
6363
```
6464

65-
#### Parameters {/*render-parameters*/}
65+
#### Parameter {/*render-parameters*/}
6666

6767
* `props`: *props* yang dioperkan oleh komponen induk.
6868

6969
* `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)
7070

71-
#### Returns {/*render-returns*/}
71+
#### Kembalian {/*render-returns*/}
7272

7373
`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`.
7474

7575
---
7676

7777
## Penggunaan {/*usage*/}
7878

79-
### Mengekspos DOM node ke komponen induk {/*exposing-a-dom-node-to-the-parent-component*/}
79+
### Mengekspos sebuah simpul DOM ke komponen induk {/*exposing-a-dom-node-to-the-parent-component*/}
8080

81-
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()`:
81+
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()`:
8282

8383
```js {3,11}
8484
import { forwardRef } from 'react';
@@ -94,7 +94,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
9494
});
9595
```
9696

97-
Anda akan menerima <CodeStep step={1}>ref</CodeStep> sebagai argumen kedua setelah props. Berikan ke *DOM node* yang ingin Anda ekspos:
97+
Anda akan menerima <CodeStep step={1}>ref</CodeStep> sebagai argumen kedua setelah props. Berikan ke simpul DOM yang ingin Anda ekspos:
9898

9999
```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
100100
import { forwardRef } from 'react';
@@ -131,9 +131,9 @@ function Form() {
131131
}
132132
```
133133

134-
Komponen `MyInput` meneruskan *ref* tersebut ke tag peramban `<input>`. Hasilnya, komponen `Form` dapat mengakses *DOM node* `<input>` tersebut dan memanggil fungsi [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) di atasnya.
134+
Komponen `MyInput` meneruskan *ref* tersebut ke tag peramban `<input>`. Hasilnya, komponen `Form` dapat mengakses simpul DOM `<input>` tersebut dan memanggil fungsi [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) di atasnya.
135135

136-
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.
136+
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.
137137

138138

139139
<Recipes title="Examples of forwarding a ref">
@@ -194,7 +194,7 @@ input {
194194

195195
#### Memutar dan menjeda video {/*playing-and-pausing-a-video*/}
196196

197-
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* `<video>`. Komponen `Aplikasi` mendefinisikan sebuah ref dan meneruskannya ke komponen `MyVideoPlayer`. Komponen `MyVideoPlayer` meneruskan *ref* tersebut ke *node* `<video>` pada peramban. Hal ini memungkinkan komponen `Aplikasi` memainkan dan menjeda `<video>`.
197+
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 simpul DOM `<video>`. Komponen `Aplikasi` mendefinisikan sebuah *ref* dan meneruskannya ke komponen `MyVideoPlayer`. Komponen `MyVideoPlayer` meneruskan *ref* tersebut ke simpul `<video>` pada peramban. Hal ini memungkinkan komponen `Aplikasi` memainkan dan menjeda `<video>`.
198198

199199
<Sandpack>
200200

@@ -367,9 +367,9 @@ input, button {
367367

368368
---
369369

370-
### Mengekspos penanganan imperatif daripada DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
370+
### Mengekspos penanganan imperatif alih-alih sebuah simpul DOM {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
371371

372-
Daripada mengekspos seluruh *DOM node*, Anda dapat mengekspos objek khusus, yang disebut *imperative handle,* dengan sekumpulan metode yang lebih terbatas. Untuk melakukan ini, Anda harus mendefinisikan *ref* terpisah untuk menampung *DOM node*:
372+
Daripada mengekspos seluruh simpul DOM, Anda dapat mengekspos objek khusus, yang disebut penanganan imperatif (*imperative handle*), dengan sekumpulan *methods* yang lebih terbatas. Untuk melakukan ini, Anda harus mendefinisikan *ref* terpisah untuk menampung *DOM node*:
373373

374374

375375
```js {2,6}
@@ -405,7 +405,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
405405
});
406406
```
407407

408-
Jika beberapa komponen mendapatkan referensi ke `MyInput`, komponen tersebut hanya akan menerima objek `{ focus, scrollIntoView }`, bukan *DOM node*. Hal ini memungkinkan Anda membatasi informasi yang Anda paparkan tentang *DOM node* seminimal mungkin.
408+
Jika beberapa komponen mendapatkan referensi ke `MyInput`, komponen tersebut hanya akan menerima objek `{ focus, scrollIntoView }`, bukan simpul DOM. Hal ini memungkinkan Anda membatasi informasi yang Anda paparkan tentang simpul DOM seminimal mungkin.
409409

410410
<Sandpack>
411411

@@ -468,9 +468,9 @@ input {
468468

469469
<Pitfall>
470470

471-
**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.
471+
**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.
472472

473-
**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 `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) dapat membantu Anda mengekspos perilaku imperatif melalui *props*.
473+
**Jika Anda dapat mengekspresikan sesuatu sebagai *prop*, Anda tidak seharusnya menggunakan *ref*.** Sebagai contoh, alih-alih mengekspos sebuah penanganan imperatif seperti `{ open, close }` dari sebuah komponen `Modal`, lebih baik menggunakan `isOpen` sebagai *prop* seperti `<Modal isOpen={isOpen} />`. [Efek](/learn/synchronizing-with-effects) dapat membantu Anda mengekspos perilaku imperatif melalui *props*.
474474

475475
</Pitfall>
476476

@@ -495,7 +495,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
495495
});
496496
```
497497

498-
Untuk memperbaikinya, berikan `ref` ke *DOM node* atau komponen lain yang dapat menerima *ref*:
498+
Untuk memperbaikinya, berikan `ref` ke simpul DOM atau komponen lain yang dapat menerima *ref*:
499499

500500
```js {1,5}
501501
const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -521,7 +521,7 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
521521
});
522522
```
523523

524-
Jika `showInput` bernilai `false`, maka *ref* tidak akan diteruskan ke *node* mana pun, dan *ref* ke `MyInput` akan tetap kosong. Hal ini sangat mudah terlewatkan jika kondisi tersebut tersembunyi di dalam komponen lain, seperti `Panel` pada contoh ini:
524+
Jika `showInput` bernilai `false`, maka *ref* tidak akan diteruskan ke simpul mana pun, dan *ref* ke `MyInput` akan tetap kosong. Hal ini sangat mudah terlewatkan jika kondisi tersebut tersembunyi di dalam komponen lain, seperti `Panel` pada contoh ini:
525525

526526
```js {5,7}
527527
const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {

0 commit comments

Comments
 (0)